Javascript OnClick功能在Chrome上不起作用？

我尝试在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;

import React，{Component}来自“React”；
从“react daterange picker”导入daterange picker；
导入“react daterange picker/dist/css/react calendar.css”；
从“时刻”导入原始时刻；
导出类筛选器扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
isOpen:false，}；
}
onToggle=（）=>{
this.setState（{isOpen:！this.state.isOpen}）；
};
render（）{
返回(
选择{“}
今天
昨天
上周
上个月
上季度
去年
总体上
习俗
{this.state.isOpen&&(
)}
);
}
}
导出默认过滤器；

选项

onClick

-不需要 您可以将

onChange

放入

select

标记中

---

单击（更改）选项时，将触发“选择一次更改”（select onChange）。请尝试对选择元素使用

onChange

而不是

onClick

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

只需向自定义选项添加值，并在if语句中检查它

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

习俗

导出类过滤器扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
伊索彭：错，
};
}
handleChange=（事件）=>{
如果（event.target.value==“自定义”）{
this.setState（{isOpen:！this.state.isOpen}）；
}
};
render（）{
返回(
选择{“}
今天
昨天
上周
上个月
上季度
去年
总体上
习俗
{this.state.isOpen&&(
)}
);
}
}
导出默认过滤器；

您可以有一个子组件，它只呈现

选项

标记。实际上，您不需要将事件处理程序添加到

选项

标记中。单击

选项

标记（将其值传递给标记）后，将自动调用

选择onChange

事件

---

请参见此处的示例：

尝试将onClick移动到select元素为什么在单个选项上有

onClick

处理程序？目的何在？为什么不改为使用select的

onChange

处理程序？@drewrese可能仅在选择该选项时运行我有，因为我想从该选项打开日期范围selected与单击并不完全相同，但在这种情况下，如果单击某个选项，它将被选中。几乎没有理由在选择选项上使用

onClick

。为什么不在选择该选项时打开日期范围？codepen不起作用。。对不起，我已经更新了。这里是链接

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;