如何使用 onChange 方法設置單個元素的狀態<select>反應？

Question

我有帶有選擇標簽的反應組件，它為數組中的任何項目呈現（如果數組中有一個值，那么頁面上將有一個選擇，2 個值 = 選擇標簽），選擇接收 onChange 方法，當我更改某些內容時首先，它也為每個選擇元素更改相同。

如何將 onChange 應用於特定元素而不是所有元素？

我的代碼如下：

  options: [
    {name: "Change status", value:["Available", "Not Available", "Vacation"]}
  ]
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      firstname: '',
      lastname: '',
      status: 'Available',
      newstatus: 'Not Available',
      hits: [],
      isLoading: false,
      error: 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 = []
    let OptionsData = optionsArray.options
    OptionsData.forEach((val, index) => {
      let OptionsDatavalue = val.value
      OptionsArray.push(
        <FormControl>
          <InputLabel htmlFor="controlled-open-select">{val.status}</InputLabel>
          <Select
            key={index}
            name="newstatus"
            value={this.state[val.name] ? this.state[val.name] : ""}
            onChange={this.onChange}
            inputProps={{ name: val.name }}
          >
            {OptionsDatavalue.map(option => (
              <MenuItem key={option} value={option}>
                {option}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      );
    });
    return OptionsArray;
  };

在渲染中我運行：

      <form autoComplete="off" className="new_status">
    <FormControl>{this.loadoptions()}</FormControl>
      </form>

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