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

问题描述

当我在查看受控表单组件参考中的示例时在react.js 官方网站，我想知道应该如何实现一个form，您可以在其中remove> 和 add input 元素动态地控制组件?这甚至可能吗?

在示例中我们可以看到:

class NameForm 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {值:''};this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}句柄变化(事件){this.setState({value: event.target.value});}处理提交(事件){alert('提交了一个名字:' + this.state.value);event.preventDefault();}使成为() {返回 (<form onSubmit={this.handleSubmit}><标签>姓名:<input type="text" value={this.state.value} onChange={this.handleChange}/><input type="submit" value="Submit"/></表单>);}}

由于我的工作性质，我经常发现自己不得不实施此类表格.此外，我不直接 add 或 remove input 元素 - 我正在管理自定义组件，但为了简单起见，我在这里问用于基本表单元素.

解决方案

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

是的，这是可能的，您可以动态添加/删除input元素，但为此您需要注意以下几点:

1- 正确绑定事件.

2- 数组分别存储每个输入元素的值.

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

逻辑:

在 state 内部维护一个数组，它将存储值.使用 #array.map 为每个数组值创建 ui(输入元素).在创建字段时，对每个字段使用删除 button，并在该 function 中传递字段索引，它将帮助您确定要删除的字段，对 onChange 也做同样的事情.

检查这个例子:

class App extends React.Component {构造函数(道具){超级(道具)；this.state = { 值:[] };this.handleSubmit = this.handleSubmit.bind(this);}创建UI(){返回 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)}/>

)}handleChange(i, 事件) {让值 = [...this.state.values];值[i] = event.target.value;this.setState({ values });}添加点击(){this.setState(prevState => ({ values: [...prevState.values, '']}))}移除点击(i){让值 = [...this.state.values];values.splice(i,1);this.setState({ values });}处理提交(事件){alert('提交了一个名字:' + this.state.values.join(', '));event.preventDefault();}使成为() {返回 (<form onSubmit={this.handleSubmit}>{this.createUI()}<input type='button' value='add more' onClick={this.addClick.bind(this)}/><input type="submit" value="Submit"/></表单>);}}ReactDOM.render(, 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/

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- Proper binding of events.

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

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

Logic:

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.

Check this example:

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

Check the working jsfiddle: https://jsfiddle.net/mayankshukla5031/ezdxg224/

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