Reagisci, forma un problema rinfrescante
Aug 24 2020
Ecco una breve spiegazione di ciò che sto cercando di ottenere come risultato. Ho creato un modulo in cui l'utente inserirà e-mail e testo. Quando si fa clic sul Submitpulsante, i dati vengono inviati tramite SmtpJS. Tuttavia, quando inserisco i dati, il modulo si ricarica (il modulo, non l'intera pagina). Cosa c'è che non va?
import React, { Component, lazy, Suspense } from 'react';
import './App.css';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
...
import { OnlineReception } from './components/OnlineReception/OnlineReception';
export default class App extends Component {
state = {
...
// feedback form
formData: {
host: "smtp.mailtrap.io",
recipient: "[email protected]", // email is an example here
sender: "",
text: "",
subject: "Feedback",
token: ""
}
}
// send email with data
// from Online Reception's
// component form
/*
sendEmail = () => {
window.Email.send({
Host : this.state.formData.host,
Username : "someUsername", // for local testing
Password : "somePassword", // for local testing
To : this.state.formData.recipient,
From : this.state.formData.sender,
Subject : this.state.formData.subject,
Body : `<html>${this.state.formData.text}</html>`
}).then(
message => alert(message)
)
};
*/
// changing sender & message input values
toggleChangeSender = async (event) => {
event.preventDefault();
event.stopPropagation();
await this.setState({
...this.state,
formData: {
host: this.state.formData.host,
recipient: this.state.formData.recipient,
sender: event.target.value,
text: this.state.formData.text,
subject: this.state.formData.subject,
token: this.state.formData.token
}
});
console.log("sender - ", this.state.formData.sender);
}
toggleChangeText = async (event) => {
event.preventDefault();
event.stopPropagation();
await this.setState({
...this.state,
formData: {
host: this.state.formData.host,
recipient: this.state.formData.recipient,
sender: this.state.formData.sender,
text: event.target.value,
subject: this.state.formData.subject,
token: this.state.formData.token
}
});
console.log("text - ", this.state.formData.text);
}
render() {
return (
<BrowserRouter>
<div className="App">
...
<Switch>
...
<Route path="/online-reception/" component={
() =>
<OnlineReception
formData={ this.state.formData }
onChangeSenderData={ this.toggleChangeSender }
onChangeTextData={ this.toggleChangeText }
/>
} />
</Switch>
</div>
</BrowserRouter>
);
}
}
Componente OnlineReception con un modulo
import React from 'react';
import './css/OnlineReception.css';
export const OnlineReception = (props) => {
let { formData } = { ...props };
const validation = (e) => {
e.preventDefault();
console.log("validation called");
console.log("formData - ", formData);
};
return (
<div className="OnlineReception">
<h3 className="title">
Feedback
</h3>
<form className="feedback"
onSubmit={ validation }
>
<div className="wrapper">
<label>
Email
</label>
<input
type="email"
name="replyto"
className="field"
placeholder="Example: [email protected]"
autoComplete="off"
value={ formData.sender }
onChange={ props.onChangeSenderData }
/>
<label>
Message
</label>
<textarea
name="message"
className="field text-body"
placeholder="Text here"
value={ formData.text }
onChange={ props.onChangeTextData }
/>
<div className="buttonBox">
<button className="submit"
type="submit"
>
Submit
</button>
</div>
</div>
</form>
</div>
)
};
PS Ho provato a controllare l' onSubmitevento del modulo, ma si ricarica ancora
Risposte
1 MayankPandeyz Aug 24 2020 at 09:08
Questo è il comportamento predefinito del modulo, se vuoi mantenere il modulo invia sotto il suo metodo di gestione dell'invio usa e.preventDefault()come:
handleFormSubmit = (event) => {
e.preventDefault()
}
e la forma sarà come:
<form onSubmit={this.handleFormSubmit}>
LirysJH Aug 24 2020 at 12:27
Questo mi ha aiutato a risolvere il problema - <Route path="/online-reception/" render={ ... }