Question

我有一个带有输入字段的表单。提交表单后，需要清除输入字段。我试图将状态设置为空数组-没用，然后我尝试使用引用-也不对我有用...

此功能激活onSubmit事件。

addHaspInfo = (e) => {  
 // e.preventDefault();  
    axios.post("/hasp", {
      company: {
            name: e.target[3].value,
            city: e.target[4].value,
            phone: e.target[5].value
            },
            numberOfKeys: e.target[2].value,                      
            serial: e.target[0].value,
            soft: e.target[1].value,
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      })
      axios.get("/hasp") 
      .then((haspData) => {
        console.log(haspData.data);
        this.setState({
          hasps: haspData.data
        });
      }); 
      this.setState({
          hasps: []      //this don't reset input fields
        });        
  }

<form id="formId" className="form-group haspAddForm" onSubmit={this.addHaspInfo}>

蚂蚁这也不起作用：

 clearInput = () => {
        this.setState({hasps: []});
        ReactDOM.findDOMNode(this.refs.myInput).focus();  //this don't reset input fields
       }

<button onClick={this.clearInput} className="btn btn-primary" type="submit"  style={{marginBottom:'40px', marginRight: '110px'}}>Add new hasp info</button>

其中一个输入字段

<input ref="myInput" type="text" className="form-control" value={this.state.serial} placeholder="00000-00000" required /><br />

Answer 1

尝试

clearInput = ()=>{
  this.setState({...this.state,
                  serial: ""
                })
  }

这是您重置输入字段的方式。散布状态，然后将表示输入字段的值的状态设置为空字符串。

Answer 2

您输入的值为this.state.serial。要重置输入值，可以将state的'serial'属性设置为空字符串。

示例：

this.setState({ serial: "" })

在代码上，您正在将hasp属性设置为空数组。但是您没有在输入字段上使用此属性。因此，重置此属性无效。您需要将自己在表单输入中的value道具上使用的所有属性重置为状态。

我建议您阅读https://reactjs.org/docs/forms.html，以了解表单如何在React上工作。

在您的Submit函数上，您可以从状态中获取值。不必使用e.target数组。这使代码混乱。

最好的反应方法是使用受控输入。您可以看到：https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

Answer 3

尝试将回调传递给您的.setState()方法。那对我有用。

this.setState({
  hasps: []      
  }, e.target.reset()
);

在React中提交表单后无法重置输入字段

3 个答案: