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

Question

I have react component with select tag, which is rendered for any item in array (if one value in array, then one select will be on the page, 2 values = select tags), select receive onChange method, and when i changing something in first it's also change the same for every select element.

How I can apply onChange for a specific element and not for all elements?

My code is below:

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

In render i run:

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

Answer 1

As per your code. You have a problem in giving the name to a select.

<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

You can use simply use an Object for options inside the state to make it work.

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

Here is the fiddle.

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