reactjs - 在 React 中动态创建输入数组

Question

我还是 React 框架的新手。我正在开发一个项目，我希望允许用户创建选择字段。我目前正在使用 react 选择来渲染选择字段或下拉列表。我需要他们从选择输入字段中选择的值。问题是用户需要能够创建多个输入字段。每个输入字段必须有一个唯一的键。我希望能够检索他们选择的值。

以下是我目前所掌握的内容:

 class OptionsComponent extends React.Component{
  constructor(props){
   super(props);
   this.state = {
    fields: [],
    parentArray: [],
    optionsArray: [],
    selectedOption:'',

   };

this.handleSelect = this.handleSelect.bind(this); 
}

 handleSelect = (event, index) => {
  console.log(event);
  console.log(optionsArray);
  console.log(selectedOption);
  const optionsArray = [...this.state.optionsArray];
  let selectedOption = event.label;
  optionsArray[index]= event.target.value;

  this.setState({
    optionsArray,
    selectedOption: event.label,
  })}

 render(){

return(

  <div className="">
    <div className="optionsArea">

      { this.state.parentArray.map((el, index) =>
        <div key={index} className="selectDropdown ">
            { this.state.optionsArray.map((el, index) => {
              return <Select
              key={index}
              name="optionsSelect"
              className="userOptionSelectDropdown"
              placeholder="Select Variable"
              value={this.state.selectedOption}
              onChange={(event) => this.handleSelect(event)}
              onSelect={(event) => this.handleSelect(event)}
              options={this.state.fields.map((field, index) => {
              return {value: index, label: field.name;
            })} />
          })}
        </div>
      )
    }
    </div>

  </div>

    );
   }
 }

如果这是重复的，我提前道歉。我检查了类似的问题并进行了谷歌搜索，但我找不到任何东西。现在，当我在组件中使用此代码时，它不会呈现任何内容。我不太确定为什么。感谢您的帮助。

Answer 1

您可以设置组件的名称并在handleSelect期间获取它并直接获取值(例如，如果您使用bootstrap 4中的自定义控件，则可以使用)。请记住在选项中为索引使用不同的名称。

handleSelect = (event) => {
    let name = event.target.name;
    let value = event.target.value; 

    // perform action

    ...

}

然后在渲染中在 map 中生成一个唯一的名称，例如 name={"optionsSelect_"+ el + "_"+ index} 或任何您喜欢的名称:

...

{ this.state.parentArray.map((el, index) =>
    <div key={index} className="selectDropdown ">
        { this.state.optionsArray.map((el, index) => {
          return <Select
          key={index}
          name={"optionsSelect_" + el + "_" + index}
          className="userOptionSelectDropdown"
          placeholder="Select Variable"
          value={this.state.selectedOption}
          onChange={(event) => this.handleSelect(event)}
          onSelect={(event) => this.handleSelect(event)}
          options={this.state.fields.map((field, index2) => {
          return {value: index2, label: field.name;
        })} />
      })}
    </div>
  )
}

...

如果设置名称不起作用，您也可以尝试引用:

...

{ this.state.parentArray.map((el, index) =>
    <div key={index} className="selectDropdown ">
        { this.state.optionsArray.map((el, index) => {
          return <Select
          key={index}
          ref={a => (this["optionsSelect_" + el + "_" + index] = a)}
          name={"optionsSelect_" + el + "_" + index}
          className="userOptionSelectDropdown"
          placeholder="Select Variable"
          value={this.state.selectedOption}
          onChange={(event) => this.handleSelect(event)}
          onSelect={(event) => this.handleSelect(event)}
          options={this.state.fields.map((field, index2) => {
          return {value: index2, label: field.name;
        })} />
      })}
    </div>
  )
}
...

然后将其放入您的句柄中(您将获得完整的组件):

handleSelect = (event) => {
    let name = event.target.name;
    let element = this[name]; 

    // perform action

    ...

}

使用纯 javascript 获取选定值的方法有很多，看看 here .

这非常重要!

如果您需要根据先前的状态修改状态，请不要这样做:

    ...
    const optionsArray = [...this.state.optionsArray];
    let selectedOption = event.label;
    optionsArray[index]= event.target.value;

    this.setState({
        optionsArray,
        selectedOption: event.label,
    })
    ...

setState 还接收一个函数，并为您提供先前的状态，以便您处理它、进行所需的任何更改，并确保它们将被正确设置。

    ...    
    this.setState(prevState => {
        // get current state
        let newOptionsArray = prevState.optionsArray;
        let selectedOption = event.label; // or whatever
        newOptionsArray[index]= event.target.value; // or whatever

        return({
            optionsArray: newOptionsArray,
            selectedOption: event.label,
        });
    });
    ...

请阅读in the official docs了解 setState 的工作原理。