在 React 中，你如何处理几个 select 下拉列表的 onChange

Question

我有一个表单，其中有几个 select 作为 Dropdown 组件，我希望 onChange 处理程序单独处理它们。我该怎么做？

Dropdown 是根据数据库中的问题数量动态生成的，因此为每个 Dropdown（例如 30 个问题）编写一个 onChange 处理程序是荒谬的)

组件

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 并且不为每个 Dropdowns 编写重复的处理程序。

Answer 1

对于字段的动态处理，我通常给字段起一个名字，并用以下方式处理onChange：

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

只要您使用这些名称呈现选择，并从状态中分配它们的值，一切都会正常工作。

注意 - 我将它保存在一个对象中，因此我可以使用 this.state.formData.

一次获取所有表单数据

您可以将同一个 onChange 处理程序分配给多个字段，它们都会起作用。（注意，这也适用于输入字段，以及任何使用 .value 的内容）

Answer 2

您的 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;

在 React 中，你如何处理几个 select 下拉列表的 onChange

In React how do you handle the onChange of several select dropdowns

javascript

html-select

reactjs

组件