Question

我有一个表单，其中包含多个select作为Dropdown组件，并且我希望onChange处理程序单独处理它们。我该怎么办？

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

组件

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

对于字段的动态处理，我通常为字段命名，并使用以下方法处理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中，您如何处理几个选择下拉列表的onChange

组件

2 个答案: