我在Reactjs/nextjs工作,现在我正在整合时事通讯(提交表单),但一旦我提交表单,然后无法在文本框中键入任何内容,我该如何解决这个问题?我尝试使“状态”为空,但仍然无法键入任何内容,这里是我目前的代码
const [state, setState] = useState({});
const handleSubmit = (e) => {
e.preventDefault();
const data = {
name: e.target.name.value,
country: e.target.country.value,
msgs: e.target.msgs.value,
};
axios
.post("xxxxxxxxxxxxxxxxxxxxxxxx",data)
.then(function (response) {
if (response.data.msg == "exist") {
$("#msg4").show("slow").delay(5000).fadeOut();
setState({
...state,
name: ""
});
} else {
}
});
return (
<>
<form className="row" id="home_contact_form" onSubmit={handleSubmit}>
<input
type="text"
name="name"
id="name"
placeholder="Enter Your Email"
value={state.name}
// onChange={handleChange}
className="input-group"
/>
<input type="submit" value="send" className="sendbtn" id="sendbtn" />
</form>
</>
)
1条答案
按热度按时间yizd12fk1#
如果您想使输入成为受控组件,您可以这样做:
并为onChange提供事件处理程序