Phản ứng, biểu mẫu làm mới vấn đề
Aug 24 2020
Đây là lời giải thích ngắn gọn về kết quả mà tôi đang cố gắng đạt được. Tôi đã tạo một biểu mẫu mà người dùng sẽ nhập email và văn bản. Khi nhấp vào Submitnút - dữ liệu được gửi qua SmtpJS. Tuy nhiên, khi tôi nhập dữ liệu - biểu mẫu tải lại (biểu mẫu, không phải toàn bộ trang). Chuyện gì vậy?
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>
);
}
}
Thành phần OnlineReception có biểu mẫu
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>
)
};
Tái bút Tôi đã cố gắng kiểm soát onSubmitsự kiện của biểu mẫu, nhưng nó vẫn tải lại
Trả lời
1 MayankPandeyz Aug 24 2020 at 09:08
Đây là hành vi mặc định của biểu mẫu, nếu bạn muốn giữ biểu mẫu, hãy gửi biểu mẫu theo phương pháp xử lý gửi của nó, hãy sử dụng e.preventDefault()như:
handleFormSubmit = (event) => {
e.preventDefault()
}
và hình thức sẽ như thế nào:
<form onSubmit={this.handleFormSubmit}>
LirysJH Aug 24 2020 at 12:27
Điều này đã giúp tôi giải quyết vấn đề - <Route path="/online-reception/" render={ ... }