清除并重置表单输入字段

Question

我有一个包含各种输入字段和两个按钮的表单；一个用于提交，另一个用于取消。

<form id="create-course-form">
  <input type="text" name="course_Name" ref="fieldName">
  <input type="text" name="course_org" ref="fieldOrg">
  <input type="text" name="course_Number" ref="fieldNum">

  <input type="submit" name="saveCourse" value="Create">
  <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse}>
</form>

我要单击的取消按钮时清空所有输入。到目前为止，我已经设法通过使用每个输入的 ref 属性来做到这一点。

cancelCourse(){
  this.refs.fieldName.value="";
  this.refs.fieldorg.value="";
  this.refs.fieldNum.value="";
}

但是，我想清空输入字段，而不必分别清空每个字段。我想要类似的东西（jQuery）：$('#create-course-form input[type=text]').val('');

Answer 1

答案取决于您的输入是 受控 还是 不受控制 。如果不确定或需要更多信息，请查看官方文档对
受控组件
和非
受控组件的评论
。 感谢 @ Dan-Esparza 提供的链接。

另外，请注意 不建议 在ref中 使用字符串文字 。请改用标准回调方法。

清除具有不受控制的字段的表单

您可以清除整个表单，而不是分别清除每个表单字段。

cancelCourse = () => { 
  document.getElementById("create-course-form").reset();
}

render() {
  return (
    <form id="create-course-form">
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

如果您的表单没有id属性，则也可以使用ref：

cancelCourse = () => { 
  this.myFormRef.reset();
}

render() {
  return (
    <form ref={(el) => this.myFormRef = el;}>
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

清除具有受控字段的表单

如果使用受控表单字段，则可能必须显式重置表单中的每个组件，具体取决于状态中值的存储方式。

如果分别声明它们，则需要显式地重设每个：

cancelCourse = () => { 
  this.setState({
    inputVal_1: "",
    inputVal_2: "",
    ...
    inputVal_n: "",
  });
}

render() {
  return (
    <input value={this.state.inputVal_1} onChange={this.handleInput1Change}>
    <input value={this.state.inputVal_2} onChange={this.handleInput2Change}>
    ...
    <input value={this.state.inputVal_n} onChange={this.handleInputnChange}>
  );
}

下面的演示：

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      inputVal_1: "",
      inputVal_2: "",
      inputVal_3: "",
      inputVal_4: "",
      inputVal_5: "",
      inputVal_6: "",
      inputVal_7: "",
      inputVal_8: "",
      inputVal_9: "",
      inputVal_10: ""
    };
  }

  handleInput1Change = (e) => {
    this.setState({inputVal_1: e.target.value});
  }

  handleInput2Change = (e) => {
    this.setState({inputVal_2: e.target.value});
  }

  handleInput3Change = (e) => {
    this.setState({inputVal_3: e.target.value});
  }

  handleInput4Change = (e) => {
    this.setState({inputVal_4: e.target.value});
  }

  handleInput5Change = (e) => {
    this.setState({inputVal_5: e.target.value});
  }

  handleInput6Change = (e) => {
    this.setState({inputVal_6: e.target.value});
  }

  handleInput7Change = (e) => {
    this.setState({inputVal_7: e.target.value});
  }

  handleInput8Change = (e) => {
    this.setState({inputVal_8: e.target.value});
  }

  handleInput9Change = (e) => {
    this.setState({inputVal_9: e.target.value});
  }

  handleInput10Change = (e) => {
    this.setState({inputVal_10: e.target.value});
  }

  cancelCourse = () => { 
    this.setState({
      inputVal_1: "",
      inputVal_2: "",
      inputVal_3: "",
      inputVal_4: "",
      inputVal_5: "",
      inputVal_6: "",
      inputVal_7: "",
      inputVal_8: "",
      inputVal_9: "",
      inputVal_10: ""
    });
  }

  render() {
    return (
      <form>
        <input value={this.state.inputVal_1} onChange={this.handleInput1Change} />
        <input value={this.state.inputVal_2} onChange={this.handleInput2Change} />
        <input value={this.state.inputVal_3} onChange={this.handleInput3Change} />
        <input value={this.state.inputVal_4} onChange={this.handleInput4Change} />
        <input value={this.state.inputVal_5} onChange={this.handleInput5Change} />
        <input value={this.state.inputVal_6} onChange={this.handleInput6Change} />
        <input value={this.state.inputVal_7} onChange={this.handleInput7Change} />
        <input value={this.state.inputVal_8} onChange={this.handleInput8Change} />
        <input value={this.state.inputVal_9} onChange={this.handleInput9Change} />
        <input value={this.state.inputVal_10} onChange={this.handleInput10Change} />
        <input type="submit" name="saveCourse" value="Create" />
        <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} />
      </form>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

不过，有一种更干净的方法可以做到这一点。与其具有n状态属性和n事件处理程序，不为每个输入一个，而是使用一些巧妙的编码，我们可以极大地减少代码。

在构造函数中，我们只声明一个空对象，该对象将用于保存输入值。我们仅使用一个输入处理程序，并将要更改其值的输入元素的索引传递给它。这意味着，当我们开始输入单个输入的值时，便会生成该值。

要重置表单，我们只需要将输入对象重新设置为空即可。

输入值为this.state.inputVal[i]。如果i不存在（我们尚未在该输入中键入任何内容），我们希望该值是一个空字符串（而不是null）。

cancelCourse = () => { 
  this.setState({inputVal: {}});
}

render() {
  return (
    <form>
      {[...Array(n)].map(
        (item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} />
      )}
    </form>
  );
}

下面的演示：

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      inputVal: {}
    };
  }

  handleInputChange = (idx, {target}) => {
    this.setState(({inputVal}) => {
      inputVal[idx] = target.value;
      return inputVal;
    });
  }

  cancelCourse = () => { 
    this.setState({inputVal: {}});
  }

  render() {
    return(
      <form>
        {[...Array(10)].map(  //create an array with a length of 10
          (item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} />  //bind the index to the input handler
        )}
        <input type="submit" name="saveCourse" value="Create" />
        <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} />
      </form>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>