避免下拉列表中的多个事件：ReactJS

Question

我正在尝试处理复选框内的树。我正在使用 onClick、onClose 和 onOpen 来实现下拉菜单的打开。但是当点击语义-ui-react 时不知何故 onclick 和 onclose。有人可以帮我实现这一目标吗？

点击下拉菜单时，它应该打开下拉菜单，然后切换它，无论何时进行树更改，它都应该打开。

https://codesandbox.io/s/semantic-ui-react-yzemk?file=/index.js

import React from "react";
import { render } from "react-dom";
import { Dropdown } from "semantic-ui-react";
import CheckboxTree from "react-checkbox-tree";
import "react-checkbox-tree/lib/react-checkbox-tree.css";
const nodes = [
  {
    value: "mars",
    label: "Mars",
    children: [
      { value: "phobos", label: "Phobos" },
      { value: "deimos", label: "Deimos" }
    ]
  }
];

class App extends React.Component {
  state = {
    checked: [],
    expanded: [],
    options: [],
    open: false
  };

  onClose = e => {
    console.log("on close");
    this.setState({ open: true });
  };

  onOpen = e => {
    console.log("on open");
    this.setState({ open: true });
  };

  onChange = e => {
    console.log("on change");
    e.stopPropagation();
    this.setState({ open: true });
  };

  onClick = e => {
    console.log("on click");
    e.stopPropagation();
    this.setState({ open: !this.state.open });
  };

  render() {
    return (
      <div>
        <Dropdown
          className="icon"
          selection
          options={this.state.options}
          text="Select"
          open={this.state.open}
          onClose={this.onClose}
          onOpen={this.onOpen}
          onChange={this.onChange}
          onClick={this.onClick}
        >
          <Dropdown.Menu>
            <Dropdown.Item>
              <CheckboxTree
                nodes={nodes}
                checked={this.state.checked}
                expanded={this.state.expanded}
                onCheck={checked =>
                  this.setState({ checked }, () => {
                    console.log(this.state.checked);
                  })
                }
                onExpand={expanded => this.setState({ expanded })}
              />
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>

      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 1

如果我理解正确，您遇到了下拉菜单未关闭的问题，我在您的代码中看到您在 onClose 中将 open 设置为 true。

onClose = e => {
    console.log("on close");
    this.setState({ open: false }); // this is `true` in your code
  };

作为进一步的建议，当您使用现有状态来修改状态时，请在 setState 中使用 callback function。

// this.setState({ open: !this.state.open }); don't use this
this.setState((prevState)=>{
  return {
    open: !prevState.open,
  };
});

Answer 2

您的 OnClick 方法会在每次单击元素时更改 state.open - 即使您单击内部元素也是如此。 这就是关闭下拉菜单的原因。

--

我认为这就是您想要的，尽管我认为这不是最优雅的解决方案：

import React from "react";
import { render } from "react-dom";
import { Dropdown } from "semantic-ui-react";
import CheckboxTree from "react-checkbox-tree";
import "react-checkbox-tree/lib/react-checkbox-tree.css";
const nodes = [
  {
    value: "mars",
    label: "Mars",
    children: [
      { value: "phobos", label: "Phobos" },
      { value: "deimos", label: "Deimos" }
    ]
  }
];

class App extends React.Component {
  state = {
    checked: [],
    expanded: [],
    options: [],
    open: false
  };
/*
  onClose = e => {
    console.log(e.target)
    ///if(e.target.role==="listbox"){
      console.log("on close");
      this.setState({ open: false }); // this is `true` in your code  
    //}
};
  onOpen = e => {
    console.log("on open");
    this.setState({ open: true });
  };
  
  onChange = e => {
    console.log("on change");
    this.setState({ open: true });
  };*/
  onClick = e => {
    if(e.target.id==="dropdown" || e.target.className==="text" || e.target.className==="dropdown icon"){
      this.setState({ open: !this.state.open });
    }
    console.log("on click");
  };

  render() {
    return (
      <div>
        <Dropdown
          id="dropdown"
          className="icon"
          selection
          options={this.state.options}
          text="Select"
          open={this.state.open}
          onClose={this.onClose}
          onOpen={this.onOpen}
          onChange={this.onChange}
          onClick={this.onClick}
        >
          <Dropdown.Menu>
            <Dropdown.Item>
              <CheckboxTree
                nodes={nodes}
                checked={this.state.checked}
                expanded={this.state.expanded}
                onCheck={checked =>
                  this.setState({ checked }, () => {
                    console.log(this.state.checked);
                  })
                }
                onExpand={expanded => this.setState({ expanded })}
              />
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>

        {/* <CheckboxTree
          nodes={nodes}
          checked={this.state.checked}
          expanded={this.state.expanded}
          onCheck={checked => this.setState({ checked })}
          onExpand={expanded => this.setState({ expanded })}
        /> */}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));