Question

我确实希望使用Bootstrap 4进行原生反应（没有第三方库）。下拉切换（尤其是关闭下拉菜单）必须由专用功能控制。原因是下拉菜单必须能够接收多个点击事件。 BS的正常行为是它在第一次点击后关闭。

Bootstrap Documentation建议在使用JavaScript时使用$('.dropdown-toggle').dropdown()，但我不想使用jQuery和refs作为反应。

以下代码正在运行，但我怀疑这是好习惯。什么是最佳实践解决方案？

toggleDropdown = () => {
    document.getElementById("dropdownMenu").style.display = document.getElementById("dropdownMenu").style.display === "" ? "block" : "";
};

render() {
    <div className="dropdown">
        <button
            onClick={this.toggleDropdown}
            className="btn btn-secondary dropdown-toggle"
            type="button"
            id="dropdownMenuButton">
            Dropdown button
        </button>
        <div id="dropdownMenu" className="dropdown-menu p-4 text-muted" style={{maxWidth: "200px"}}>
            <p>Some example text that's free-flowing within the dropdown menu.</p>
        </div>
     </div>
}

Answer 1

首先想到：ToggleDropdown可以这样写（更动态）。

toggleDropdown = (e) => {
  var elem = e.target.nextElementSibling.classList;
  elem.contains('show') ? elem.remove('show') : elem.add('show');
};

Answer 2

这涉及React中状态的基本用法。

class App extends React.Component {
  state = {
    show: false,
  };

  render() {
    return (
      <div className="dropdown">
        <button
          onClick={() => this.setState((prevState) => ({ show: !prevState.show }))}
          className="btn btn-secondary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
        >
          Dropdown button
        </button>
        {this.state.show && (
          <div
            id="dropdownMenu"
            className="dropdown-menu p-4 text-muted"
            style={{ maxWidth: '200px' }}
          >
            <p>Some example text that's free-flowing within the dropdown menu.</p>
          </div>
        )}
      </div>
    );
  }
}

反应中的Bootstrap 4下拉 - 切换并在单击外部组件时关闭

2 个答案: