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

【问题标题】：Cannot reset input fields after submitting form in React在 React 中提交表单后无法重置输入字段
【发布时间】：2019-05-10 21:08:48
【问题描述】：

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

此函数激活 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 />

【问题讨论】：

您是否期望this.setState({hasps: []}); 将清除状态并仅插入hasps: []？因为实际上.setState 补丁状态不会取代它
React 对我来说是新的，所以我不明白所有的细微差别）

标签： reactjs api axios

【解决方案1】：

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

例子：

this.setState({ serial: "" })

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

我建议您阅读 https://reactjs.org/docs/forms.html 以了解表单如何在响应中起作用。

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

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

【讨论】：

当我添加您的代码时，输入字段“serial”会清除，但我有错误：警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控切换到受控（反之亦然）。 ...
是的，我肯定需要检查文件））
您需要使用受控组件。为此，您需要在输入中添加 onChange 函数，以使用 serial 的新值更新状态。
它对我有用。我在状态中添加了每个值等于“”，然后为每个值创建了 onChange 函数，然后在再次提交表单后，对每个等于“”的值使用 setState。有一件事，现在我对每个输入都有 onChange 函数。有没有机会做得更优雅，例如一个函数。 onChange 每个字段？
现在我有：onChangeSerial = (event) => { this.setState({serial: event.target.value}); } onChangeSoft = (event) => { this.setState({soft: event.target.value}); } 和其他 4 个函数

【解决方案2】：

试试

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

这就是您重置输入字段的方式。在状态中展开，然后将表示输入字段值的状态设置为空字符串。

【讨论】：

不幸的是，这对我不起作用。当我添加此代码时 - 我有一个错误（
如果你把 github repo 发给我，我可以调试它。这只是它如何工作的概念，我不能在没有看到所有代码的情况下给你确切的代码

【解决方案3】：

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

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

【讨论】：