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

63lcw9qa  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(184)

我在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> 
            </>
        )
yizd12fk

yizd12fk1#

如果您想使输入成为受控组件,您可以这样做:

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

相关问题