在 React js 中使用多个 select 选项的两个 handleChange 事件

Question

我正在尝试使用两个句柄更改函数编写（两个）多个选定选项，我认为这不是一个好习惯，因为我必须在不干扰另一个的情况下分别绑定该数据的两个选定选项多选选项。

import React, { Component } from 'react';

class AddEvent extends Component {
  constructor() {
    super();
    this.state = {
      speaker: [''],
      hash_tag: ['']
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    var options = event.target.options;
    var value = [];
    for (var i = 0, l = options.length; i < l; i++) {
      if (options[i].selected) {
        value.push(options[i].value);
      }
    }
    this.setState({ value: value });
  }

  handleChange(event2) {
    var options2 = event2.target.options;
    var value2 = [];
    for (var j = 0, l = options2.length; j < l; j++) {
      if (options2[j].selected) {
        value2.push(options2[j].value);
      }
    }
    this.setState({ value: value2 });
  }

  render() {
    return (
      <div className="col-md-12">
        <h3>Add Events</h3>
        <form onSubmit={this.handleSubmit}>
          <div className="col-md-6">
            <div className="form-group">
              <label>Event Speaker:</label>
              <select
                data-style="btn-default"
                className="form-control"
                multiple
                data-max-options="3"
                value={this.state.value}
                onChange={this.handleChange}
              >
                <option value="Vivek Srinivasan">Vivek Srinivasan</option>
                <option value="Salma Moosa">Salma Moosa</option>
                <option value="Rengaprasad">Rengaprasad</option>
              </select>
            </div>
          </div>
          <div className="col-md-6">
            <div className="form-group">
              <label>Event Hash Tags:</label>
              <select
                data-style="btn-default"
                className="form-control"
                multiple
                data-max-options="3"
                value={this.state.value}
                onChange={this.handleChange2}
              >
                <option value="hash_tag_1">hash_tag_1</option>
                <option value="hash_tag_2">hash_tag_2</option>
                <option value="hash_tag_3">hash_tag_3</option>
                <option value="hash_tag_4">hash_tag_4</option>
                <option value="hash_tag_5">hash_tag_4</option>
              </select>
            </div>
          </div>

          <div className="col-md-12">
            <div className="form-group">
              <label>Event Content</label>
              <textarea
                id="summernote"
                value="Type Here "
                onChange={val => this.setState({ content: val.target.value })}
              />
            </div>
          </div>

          <div className="col-md-3">
            <button className="btn btn-block btn-primary btn-lg" type="submit">
              Save Event
            </button>
          </div>
        </form>
      </div>
    );
  }
}
export default AddEvent;

Answer 1

我不太明白为什么您不想为每个 select 元素使用不同的处理程序。特别是因为您已经编写了两个处理程序函数。可能我误解了你的问题。

在我看来，您遇到了三个主要问题。

1) 不能像 handleChange 那样有两个同名的函数。

2) 在您当前的代码中，您引用了一个不存在的函数 (handleChange2)。

3) 在两个 handleChange 函数中，您正在用另一个覆盖状态中的值属性，因为两者都在更改状态中的属性值。

将后面的 handleChange 函数重命名为 handleChange2 将解决问题 1 和 2。

第三个问题可以通过在您的州拥有两个值属性来解决，例如value1 和 value2（尽管我建议使用更具描述性的名称）。

在 React js 中使用多个 select 选项的两个 handleChange 事件

Two handleChange events using multiple select option in react js

event-handling

handler

multiple-select

multipleselection

reactjs