В React, как вы обрабатываете onChange нескольких выбранных выпадающих

Question

У меня есть форма с несколькими select как Dropdown компонентами, и я хочу, чтобы обработчик onChange обрабатывал их индивидуально. Как я могу это сделать?

Dropdown генерируется динамически в соответствии с количеством вопросов из базы данных, поэтому будет нелепо писать обработчик onChange для каждого Dropdown (например, 30 вопросов)

компонент

const Dropdown = props => {
  const { title, id, onChange, noSelection, options, value } = props;

  return (
    <div className="form-group">
      <label className="control-label" htmlFor={id}>
        {title}
      </label>
      <select
        className="form-control"
        name={id}
        id={id}
        onChange={onChange}
        value={value}
      >
        {noSelection && <option defaultValue="" />}
        {options.map(option => (
          <option value={option} key={option}>{option}</option>
        ))}
      </select>
    </div>
  );
};

export default Dropdown;

class Form extends Component {
  constructor() {
    super();
    this.state = {
      noSelection: true,
      value,
    };

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

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

    this.setState({
      noSelection: !this.state.noSelection,
      value,
    });
  }

  render() {
    return (
      <div className="care-sub">
        <Dropdown
          title="Are a developer wanting to become a programmer?"
          id="select-care-leaver"
          onChange={this.handleSelect}
          noSelection={this.state.noSelection}
          options={['Yes', 'No']}
          value={this.state.value}
        />

        <Dropdown
          title="Do you have experience with React"
          id="select-care-estranged"
          onChange={this.handleSelect}
          noSelection={this.state.noSelection}
          options={['Yes', 'No']}
          value={this.state.value}
        />
      </div>
    );  
  }
}

export default Form

Я ожидаю, что каждый Dropdown - onChange индивидуально, когда пользователь взаимодействует с ними и не изменяет другие Dropdowns и не пишет повторных обработчиков для каждого из них.

Answer 1

Пора ваше Dropdown эволюционировать из функционального компонента в react компонент.Поскольку вы повторно используете компонент Dropdown, вам нужно будет создать обработчик onChange для него только один раз в качестве функции-члена для Dropdown.

Затем, каждый раз, когда Dropdown рендерится, онбудет использовать ту же функцию-член в другом контексте this.

Примерно так:

class Dropdown extends React.Component{
    onChange (e) {
        //do something based on props and value
    }

    render(){
    const { title, id, noSelection, options, value } = this.props;

    return (
        <div className="form-group">
        <label className="control-label" htmlFor={id}>
            {title}
        </label>
        <select
            className="form-control"
            name={id}
            id={id}
            onChange={this.onChange} // use the member function here
            value={value}
        >
            {noSelection && <option defaultValue="" />}
            {options.map(option => (
            <option value={option} key={option}>{option}</option>
            ))}
        </select>
        </div>
    );
    }
};

export default Dropdown;

Answer 2

Для динамической обработки полей я обычно присваиваю полям имя и обрабатываю onChange с помощью:

this.setState({
    formData: {
        ...this.state.formData,
        [event.target.name]: event.target.value,
    },
}

Пока вы визуализируете селекторы с этими именами и присваиваете их значение из состояниявсе будет хорошо работать.

Примечание. Я храню его в объекте, поэтому могу просто получить все данные формы сразу с помощью this.state.formData.

. Вы можете назначить этот же обработчик onChange.на несколько полей, и они все будут работать.(Обратите внимание, это также работает для полей ввода и всего, что использует .value)