Question

我有一个带有select标签的组件，它针对数组中的任何项目呈现（如果数组中有一个值，那么一个选择将出现在页面上，两个值= select标签），选择receive onChange方法，当我在其中更改某些内容时首先，每个选择元素也要更改相同的内容。如何将onChange应用于特定元素而不是所有元素？我的代码如下：选项：[ {名称：“更改状态”，值：[“可用”，“不可用”，“假期”]} ] } App类扩展了组件{ 构造函数（道具）{ 超级（道具）; this.state = { 名字： ''，姓： ''，状态：“可用”， newstatus：“不可用”，点击数：[]， isLoading：否，错误：null， }; this.onChange = this.onChange.bind（this） this.handleSubmit = this.handleSubmit.bind（this） this.loadoptions = this.loadoptions.bind（this） } onChange（e）{ this.setState（{[e.target.name]：e.target.value}）; } loadoptions =（）=> { const OptionsArray = [] 让OptionsData = optionsArray.options OptionsData.forEach（（val，index）=> { 让OptionsDatavalue = val.value OptionsArray.push（ {val.status} <选择键= {索引} name =“ newstatus” 值= {this.state [val.name]？ this.state [val.name]：“”} onChange = {this.onChange} inputProps = {{name：val.name}} > {OptionsDatavalue.map（option =>（ {选项} ））} ）; }）; 返回OptionsArray; }; 在渲染中，我运行：

Answer 1

根据您的代码。在为选择命名时遇到问题。

<Select
            key={index}
            name="newstatus" {// shoule be diffrent for each tag}
            value={this.state[val.name] ? this.state[val.name] : ""}
            onChange={this.onChange}
            inputProps={{ name: val.name }}
          >

Answer 2

您可以简单地使用对象在状态内的选项来使其正常工作。

this.state = {
  options: {
    change_status1: "Vacation",
    change_status2: "Not Available"
  }
};

onChange = e => {
  let options = this.state.options;
  options[e.target.name] = e.target.value;
  this.setState({ options }, () => {
   console.log("newState", options);
  });
};

loadoptions = () => {
 const OptionsArray = [];
 let OptionsData = _options;
 let stateOptions = this.state.options;
 OptionsData.forEach((val, index) => {
  let OptionsDatavalue = val.value;
  let selectName = val.name.split(" ").join("_").toLowerCase();
   OptionsArray.push(
    <div key={index}>
      <label>Select {val.name} </label>
      <select
        key={index}
        name={selectName}
        defaultValue={
          stateOptions[selectName] ? stateOptions[selectName] : ""
        }
        onChange={this.onChange}
      >
        {OptionsDatavalue.map(option => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
    </div>
  );
 });
 return OptionsArray;
};

render() {
  return <div className="App">{this.loadoptions()}</div>;
}

这是小提琴。

https://codesandbox.io/s/5464pqvyxk

如何使用<select>中的onChange方法设置单个元素的setState反应？

2 个答案: