javascript - 在 React 中循环文本输入

Question

我正在构建一个应用程序，我希望用户在其中指定多个文本字段，然后动态呈现这些字段。我在设置状态时遇到问题，因此它对于每个字段都是唯一的。这是代码段:

        var fieldsArray = [];

        for(var i = 0; i <= this.props.numToShow; i ++){
        fieldsArray.push(
            <div>
                <label>
                    <div className="label">{i}</div> 
                    <input type='text' value={this.state.value} name={this.state.value} onChange={this.handleChange} />
                </label>
            </div>
            );
        }

    return (
      <div className = 'inputs'>
        {fieldsArray}
      </div>
    );

目前，当我更改其中一个字段时，所有其他字段都会更新为该唯一字段状态。这是设置状态的 handleChange 函数:

    handleChange: function(e){
       this.setState({
           value: e.target.value,
       });
    }

是否可以将状态初始化为数组并以这种方式跟踪输入？或者有更好的方法吗？

Answer 1

将一组值保存在状态中会很好。您只需要确保传递输入的索引，这样您就知道要更新什么。 bind 对此有帮助:

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { values: [] };
  }

  handleChange(i, e) {
    this.setState({
      values: { ...this.state.values, [i]: e.target.value }
    });
  }

  render() {
    var fieldsArray = [];

    for (var i = 0; i <= this.props.numToShow; i++) {
      fieldsArray.push(
        <div>
            <label>
                <div className="label">{i}</div> 
                <input 
                  type='text' 
                  value={this.state.values[i]} 
                  name={this.state.values[i]} 
                  onChange={this.handleChange.bind(this, i)} />
            </label>
        </div>
      );
    }

    return (
      <div className = 'inputs'>
        {fieldsArray}
      </div>
    );
  }
}