如何在React.JS中实现带有受控组件的动态表单？ [英] How to implement a dynamic form with controlled components in React.JS?

问题描述

我正在查看受控表单组件的参考中的示例 ，我想知道如何实现一个表格你可以删除和添加 输入动态元素以这种方式，他们是受控组件？这甚至可能吗？

As I am looking at the examples in the reference for controlled form components in react.js official website, I am wondering how is one supposed to implement a form in which you would be able to remove and add input elements dynamically in such a way that they are controlled components? Is this even possible?

在示例中我们可以看到：

In the examples we can see:

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>
    );
  }
}

由于我的工作性质，我经常发现我自己必须实施这种形式。此外，我不添加或删除 输入元素直接 - 我正在管理自定义组件，但为了简单起见，我要求基本的表单元素。

Due to the nature of my work, I often find myself having to implement such forms. Moreover, I don't add or remove input elements directly - I am managing custom components, but for the sake of simplicity here I am asking for basic form elements.

推荐答案

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

How adding/removing input elements dynamically possible?

是的，有可能，你可以添加/删除输入元素动态，但为此您需要注意以下几点：

Yes, it is possible, you can add/remove input elements dynamically, But for that you need to take care of few things:

1 - 正确绑定事件。

2 - 用于存储每个值的数组单独输入元素。

2- Array to store the values of each input element separately.

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

3- When user fill value in any input element then updating only that specific value in state.

逻辑：

维持状态内的数组，用于存储值。使用 ＃array.map 为每个数组值创建ui（输入元素）。在创建字段时，对每个字段使用remove 按钮，并传递函数中的字段索引，它将帮助您确定要删除的字段，对 onChange 执行相同操作。

Maintain an array inside state, that will store the values. Use #array.map to create ui (input element) for each array values. while creating the fields, use a remove button with each field, and pass the index of field in that function, it will help you to identify which field you wants to delete, do the same thing for onChange also.

检查此项示例：

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/

这篇关于如何在React.JS中实现带有受控组件的动态表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！