OnClick 功能在 Chrome 上不起作用？

Question

我正在尝试在 react.js HTML 选择选项上使用 onClick 函数，它在 Firefox 上完美运行，但在 Chrome 上却不行。我怎样才能让它在 Chrome 中工作？到目前为止，这是我的代码：

import React, { Component } from "react";
import DateRangePicker from "react-daterange-picker";
import "react-daterange-picker/dist/css/react-calendar.css";
import originalMoment from "moment";

export class Filter extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
isOpen: false,};
  }

 onToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };


  render() {
    return (
      <div className="filter_range">
        <select
          class="form-control donn"
          name="today" 
        >
          <option selected disabled hidden>
            Choose{" "}
          </option>
          <option value="today">Today</option>
          <option value="yesturday">Yesterday</option>
          <option>Last Week</option>
          <option value="month">Last Month</option>
          <option>Last Quarter</option>
          <option value="year">Last Year</option>
          <option value="">Overall</option>
          <option value="" onClick={this.onToggle}>
           Custom
          </option>
        </select>

        {this.state.isOpen && (
          <DateRangePicker
            value={this.props.value}
            onSelect={this.props.change}
            singleDateRange={true}
            isOpen={false}
            maximumDate={new Date()}
            closeCalendar={true}
            numberOfCalendars={2}
            showLegend={true}
            locale={originalMoment().locale()}
          />
        )}
      </div>
    );
  }
}

export default Filter;

Answer 1

尝试使用onChange 而不是onClick 作为选择元素。

<select class="form-control donn" name="today" onChange={handleChange}>

只需为您的自定义选项添加值并在 if 语句中检查它

<option value="custom">
  Custom
</option>

export class Filter extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      isOpen: false,
    };
  }

  handleChange = (event) => {
    if (event.target.value === "custom") {
      this.setState({ isOpen: !this.state.isOpen });
    }
  };

  render() {
    return (
      <div className="filter_range">
        <select class="form-control donn" name="today" onChange={handleChange}>
          <option selected disabled hidden>
            Choose{" "}
          </option>
          <option value="today">Today</option>
          <option value="yesturday">Yesterday</option>
          <option>Last Week</option>
          <option value="month">Last Month</option>
          <option>Last Quarter</option>
          <option value="year">Last Year</option>
          <option value="">Overall</option>
          <option value="custom">
            Custom
          </option>
        </select>

        {this.state.isOpen && (
          <DateRangePicker
            value={this.props.value}
            onSelect={this.props.change}
            singleDateRange={true}
            isOpen={false}
            maximumDate={new Date()}
            closeCalendar={true}
            numberOfCalendars={2}
            showLegend={true}
            locale={originalMoment().locale()}
          />
        )}
      </div>
    );
  }
}

export default Filter;

Answer 2

选项onClick - 不必要

你可以把onChange放在select标签里

选择onchange triggerd当单击选项时（已更改）。

Answer 3

您可以有一个只呈现option 标记的子组件。您实际上不需要将事件处理程序添加到 option 标记。一旦单击 option 标记（传递它的值），就会自动调用 select onChange 事件。

在此处查看示例：https://codepen.io/gaearon/pen/JbbEzX?editors=0010