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

Answer 2



                               onChange={(e) => {
                                    var newPresetList = [...presetList]

                                    newPresetList.map((_item) => {
                                      if (_item.id === item.id) {
                                        _item.preset_name = e.target.value
                                        return
                                      }
                                    })
                                    setPresetList(newPresetList)
                                  }}

在React中循环文本输入

2 个答案: