Question

更新状态后，我试图清空输入标签：

state = {
    formName: '',
    inputs: [],
    tempInput: {
      inputLabel: '',
      inputType: '',
      inputValue: ''
    }
  };

这是我的表格：

  <div className="formG">
        <form className="form-maker" onSubmit={this.handleSubmit}>
          Label:
          <input name="inputLabel" type="text" onChange={this.handleChange} />
          Type:
          <input name="inputType" type="text" onChange={this.handleChange} />
          Value
          <input name="inputValue" type="text" onChange={this.handleChange} />
          Form Name
          <input name="formName" type="text" onChange={this.formName} />
          <button>Submit</button>
        </form>

这就是我处理更改的方式

 handleChange = e => {
    const { name, value } = e.target;
    this.setState(currentState => ({
      tempInput: { ...currentState.tempInput, [name]: value }
    }));
  };

我试图只清空tempInput，但是它不起作用，有人知道为什么吗？

 handleSubmit = e => {
    e.preventDefault();
    const inputs = [...this.state.inputs, this.state.tempInput];
    const { tempInput } = this.state;
    tempInput.inputLabel = '';
    tempInput.inputType = '';
    tempInput.inputValue = '';
    this.setState({ inputs, tempInput });
  };

Answer 1

您的表单是不受控制的组件，因此它们不受状态字段的控制。这就是为什么您的方法不起作用的原因。相反，您可以执行e.target.reset()，这将清除整个表单。但是，如果您想重置某些输入，可以访问它们，并将.value设置为""，如下所示。

不受控制的组件的工作方式就像表单元素在React之外一样。当用户将数据输入到表单字段（输入框，下拉列表等）中时，更新的信息将得到反映，而React无需执行任何操作。但是，这也意味着您不能强制字段具有特定值。来自Doc

因此，您的handleSubmit方法将类似于：

handleSubmit = e => {
  e.preventDefault();
  const inputs = [...this.state.inputs, this.state.tempInput];
  // ....
  // The below will reset entire form.
  // e.target.reset();
  // If you want some of them to empty.
  const { elements } = e.target
  elements['inputLabel'].value = "";
  elements['inputType'].value = "";
  elements['inputValue'].value = "";
};

检查HTMLFormElement.elements的文档

Answer 2

您的输入标签未显示您的状态值。 1）从tempInput中拉出单个值 2）使用状态存储的值，然后由handleChange更新。 3）在handleSubmit函数中，将您的各个值重置为空字符串。

您的handleChange应该看起来像：

handleChange = e => {
     const { name, value } = e.target;
     this.setState([name]: value);
};

您的jsx应该如下所示：

<form className="form-maker" onSubmit={this.handleSubmit}>
      Label:
      <input name="inputLabel" value={this.state.inputLabel} type="text" onChange={this.handleChange} />
      Type:
      <input name="inputType" value={this.state.inputType}  type="text" onChange={this.handleChange} />
      Value
      <input name="inputValue" value={this.state.inputType} type="text" onChange={this.handleChange} />
      Form Name
      <input name="formName" value={this.state.formName} type="text" onChange={this.formName} />
      <button>Submit</button>
    </form>

Answer 3

您正在改变原始状态。您可以复制然后仅设置状态。只需更改以下内容对您就可以了。

替换此：

const { tempInput } = this.state;

与此：

const { tempInput } = {...this.state}; // copy the state

此外，请确保将状态值绑定到这样的输入元素中，以使其成为受控组件：

<input name="inputLabel" type="text" 
  onChange={this.handleChange} 
  value={this.state.tempInput.inputLabel || ''} />

您的处理程序应该是：

handleChange = e => {
     const { value } = e.target;
     this.setState({value}); 
// now, value will correspond to the controlled component
};

也要小心，建议尽可能使用controlled component：

在大多数情况下，我们建议使用受控组件来实现表单。

提交表单后清空输入

3 个答案: