无法在状态为空的Reactjs后的文本框中输入任何内容

Question

我正在研究Reactjs/nextjs，现在我正在整合时事通讯(提交表单)，但是一旦我提交表单，就无法在文本框中输入任何东西，我该如何解决这个问题?我试着用make & state"空白，但仍然无法输入任何东西，这是我当前的代码

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> 
</>
)

Answer 1

如果您想将输入设置为受控组件，您可以这样做所以:

const [state, setState] = useState({ name: '' });

并为onChange 提供一个事件处理程序

const handleChange = (event) => setState({...state, name: event.target.value })
<input
type="text"
name="name"
id="name"
placeholder="Enter Your Email"
value={state.name}
onChange={handleChange}
className="input-group"
/>