OnClick Function 在 Chrome 上不起作用？

Question

I am trying to use onClick function on react.js HTML select option and it works perfectly on Firefox but not on Chrome. How can I make it work in Chrome? Here is my code so far:

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

Try to use onChange instead of onClick for select element.

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

Just add value to your custom option and check for it in the if statement

<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

Option onClick - Unnecessary

You can put onChange in the select tag

The select onChange trigerd when option is clicked (changed).

Answer 3

You can have a child component that only renders the option tag. You actually don't need to add an event handler to the option tag. The select onChange event get called automatically once an option tag is clicked (passing it's value with it).

See the example here: https://codepen.io/gaearon/pen/JbbEzX?editors=0010