如何在ReactJS中使用受控组件实现动态表单？

Question

当我查看controlled form components
react.js官方网站的参考中的示例时，我想知道应该如何实现这样一种方法，在该方法form中，您将能够动态地控制元素remove和add
input元素，使它们成为受控组件？这有可能吗？

在示例中，我们可以看到：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

由于工作的性质，我经常发现自己必须执行这种形式。此外，我不知道add或remove input元素直接-
我管理的自定义组件，但为了简单起见这里的缘故，我要求基本的表单元素。

Answer 1

如何动态地添加/删除输入元素？

是的，可以添加/删除input元素dynamically，但是为此您需要注意以下几点：

1- 正确绑定事件。

2- 数组，用于分别存储每个输入元素的值。

3- 当用户在任何输入元素中填充值时，仅在状态中更新该特定值。

逻辑：

保持内部状态的数组，该数组将存储值。使用 ＃array.map
为每个数组值创建ui（输入元素）。创建字段时，请button对每个字段使用remove
，并在其中传递字段索引function，这将帮助您确定要删除的字段，也可以执行相同的操作onChange。

检查以下示例：

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = { values: [] };

    this.handleSubmit = this.handleSubmit.bind(this);

  }



  createUI(){

     return this.state.values.map((el, i) =>

         <div key={i}>

            <input type="text" value={el||''} onChange={this.handleChange.bind(this, i)} />

            <input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>

         </div>

     )

  }



  handleChange(i, event) {

     let values = [...this.state.values];

     values[i] = event.target.value;

     this.setState({ values });

  }



  addClick(){

    this.setState(prevState => ({ values: [...prevState.values, '']}))

  }



  removeClick(i){

     let values = [...this.state.values];

     values.splice(i,1);

     this.setState({ values });

  }



  handleSubmit(event) {

    alert('A name was submitted: ' + this.state.values.join(', '));

    event.preventDefault();

  }



  render() {

    return (

      <form onSubmit={this.handleSubmit}>

          {this.createUI()}

          <input type='button' value='add more' onClick={this.addClick.bind(this)}/>

          <input type="submit" value="Submit" />

      </form>

    );

  }

}



ReactDOM.render(<App />, document.getElementById('container'));


<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='container'/>

检查工作情况jsfiddle：https :
//jsfiddle.net/mayankshukla5031/ezdxg224/