javascript - 在 React 中选择项目关闭下拉菜单？

Question

我有一个下拉菜单，它是TimePicker，您可以选择时间，例如1: 00 am等等...

我实现了当您单击外部下拉菜单时关闭。

现在，当用户选择某个选项时，我在关闭下拉菜单时遇到问题:

点击下拉菜单中的项目时，我称之为:

 onClick={(e) => {
   handleSelect(time, timeState);
   this.closeTimePicker();
 }}

此 closeTimePicekr 将状态设置为 false:

closeTimePicker = () => {
    this.setState({ isOpenTimePicker: false });
  };

问题是 closeTimePicker() 函数被调用但没有将状态更改为 false。

这是整个TimePicker - 组件的代码:

class TimePicker extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpenTimePicker: false
    };
  }

  componentDidMount() {
    document.addEventListener('mousedown', (e) => this.handleClickOutside(e));
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', (e) => this.handleClickOutside(e));
  }

  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  handleClickOutside = (event) => {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.closeTimePicker();
    }
  };

  openTimePicker = () => {
    this.setState({ isOpenTimePicker: true });
  };

  closeTimePicker = () => {
    this.setState({ isOpenTimePicker: false });
  };

  render() {
    const {
      timeState, timeOptions, timeInput, handleChange, handleSelect
    } = this.props;
    const { isOpenTimePicker } = this.state;

    return (
      <div ref={(node) => this.setWrapperRef(node)} onClick={this.openTimePicker} role="button">
        <input
          className="time-picker-input"
          value={timeInput}
          onChange={(e) => {
            handleChange(e, timeState);
            this.closeTimePicker();
          }}
        />
        {isOpenTimePicker ? (
          <ul className="time-list">
            {timeOptions.map((time) => (
              <li
                className={`time-list-item ${timeInput === time ? 'time-list-item-active' : ''}`}
                key={time}
              >
                <a
                  value={time}
                  className="time-list-item-btn"
                  onClick={(e) => {
                    handleSelect(time, timeState);
                    this.closeTimePicker();
                  }}
                  role="button"
                >
                  {time}
                </a>
              </li>
            ))}
          </ul>
        ) : (
          ''
        )}
      </div>
    );
  }
}

export default TimePicker;

如何让closeTimePicker()函数改变状态？

Answer 1

在 closeTimePicker 方法中添加 event.stopImmediatePropagation。

这里的问题是，方法 openTimePicker 被调用了两次，因为它是目标元素的父元素。

onClick={(e) => {
                    handleSelect(time, timeState);
                    this.closeTimePicker(e);
                  }}

在 closeTimePicker 方法中，

closeTimePicker = event => {
    event.stopImmediatePropagation();
    this.setState({ isOpenTimePicker: false });
}