Question

我有下拉菜单，应关闭onSelect项目下拉菜单。

这里是一个名为onSelect的函数，但认为状态isOpen: false不会改变，

但是状态部分：selected: option将被更改。

有人知道为什么吗？

onSelect = (option) => {
    this.setState({ selected: option, isOpen: false }, () => {
      this.props.onSelect(option);
    });
  };

这是一个完整的组成部分：

import React from 'react';
import onClickOutside from 'react-onclickoutside';

class SimpleDropdown extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: props.selectValue,
      isOpen: false
    };
  }

  toggleDropdown = () => {
    // eslint-disable-next-line react/no-access-state-in-setstate
    this.setState({ isOpen: true });
  };

  onSelect = (option) => {
    this.setState({ selected: option, isOpen: false }, () => {
      this.props.onSelect(option);
    });
  };

  handleClickOutside = () => {
    this.setState({ isOpen: false });
  };

  render() {
    const { selected } = this.state;
    const { title, isLoading } = this.props;

    return (
      <div className="simple-dropdown" onClick={this.toggleDropdown} role="button">
        <span className="dropdown-title">{title}:</span>
        <span>{selected.value}</span>
        {this.state.isOpen && !isLoading && (
          <ul className="dropdown-ul">
            {this.props.options.map((option) => (
              <li
                key={option.key}
                className={`dropdown-option ${option.value === selected.value ? 'hover' : ''}`}
              >
                <a className="option-btn" onClick={() => this.onSelect(option)} role="button">
                  {option.value}
                </a>
              </li>
            ))}
          </ul>
        )}
      </div>
    );
  }
}

export default onClickOutside(SimpleDropdown);

Answer 1

this.toggleDropdown甚至在选择值时也会被触发，因此添加这样的支票

toggleDropdown = () => {
    // eslint-disable-next-line react/no-access-state-in-setstate
    if (!this.state.isOpen) {
      this.setState({ isOpen: true });
    }
    
  };

Answer 2

这是由Event bubbling类型的Event propagation引起的。
基本上，子元素上的click事件会触发父元素的click事件。您可以通过在子元素点击处理程序中调用event.stopPropagation()来解决此问题。

onClick处理程序下方的通知。处理程序将获取event对象，然后调用stopPropagation方法。

<li
  key={option.key}
  className={`dropdown-option ${option.value === selected.value ? 'hover' : ''}`}
>
  <a className="option-btn" onClick={(event) => {event.stopPropagation(); this.onSelect(option)}} role="button">
                  {option.value}
  </a>
</li>

用相同的方法改变两个状态，一个不改变第二个状态，为什么？

2 个答案: