Javascript 在语义下拉列表中触发多个事件

我正在努力实现以下行为。单击下拉列表时，树应显示为一个选项，并且无论对树执行什么操作，都应保持下拉列表打开。它应该只在再次单击下拉列表以及外部单击时关闭。我使用的是onClick、onClose和onOpen处理程序。但不知何故，onclick和onclose是相互矛盾的。有人能帮我如何做到这一点吗

沙箱：

从“React”导入React；
从“react dom”导入{render}；
从“语义ui反应”导入{Dropdown}；
从“反应复选框树”导入复选框树；
导入“react checkbox tree/lib/react checkbox tree.css”；
常量节点=[
{
值：“火星”，
标签：“火星”，
儿童：[
{值：“火卫一”，标签：“火卫一”}，
{值：“deimos”，标签：“deimos”}
]
}
];
类应用程序扩展了React.Component{
状态={
已勾选：[]，
扩展：[]，
选项：[]，
开放：假
};
onClose=e=>{
控制台日志（“关闭时”）；
this.setState（{open:true}）；
};
onOpen=e=>{
控制台。登录（“打开”）；
this.setState（{open:true}）；
};
onChange=e=>{
控制台。日志（“更改时”）；
e、 停止传播（）；
this.setState（{open:true}）；
};
onClick=e=>{
console.log（“单击”）；
e、 停止传播（）；
this.setState（{open:！this.state.open}）；
};
render（）{
返回(
this.setState（{checked}，（）=>{
console.log（this.state.checked）；
})
}
onExpand={expanded=>this.setState（{expanded}）}
/>
);
}
}

onClose函数中有一个错误。将其更改为：

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

----编辑----

读了一点之后，我发现了问题： 首先，您不需要实现所有这些onClick、onOpen和onClose函数。 您只需在Dropdown.Item上添加stopPropagation（）。 查看此代码-让我知道这是否适用于您：

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
  };

  render() {
    return (
      <div>
        <Dropdown
          className="icon"
          selection
          text="Select"
        >
          <Dropdown.Menu>
            <Dropdown.Item onClick={(e) => e.stopPropagation()}>
              <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"));

从“React”导入React；
从“react dom”导入{render}；
从“语义ui反应”导入{Dropdown}；
从“反应复选框树”导入复选框树；
导入“react checkbox tree/lib/react checkbox tree.css”；
常量节点=[
{
值：“火星”，
标签：“火星”，
儿童：[
{值：“火卫一”，标签：“火卫一”}，
{值：“deimos”，标签：“deimos”}
]
}
];
类应用程序扩展了React.Component{
状态={
已勾选：[]，
扩展：[]，
选项：[]，
开放：假
};
render（）{
返回(
e、 stopPropagation（）}>
this.setState（{checked}，（）=>{
console.log（this.state.checked）；
})
}
onExpand={expanded=>this.setState（{expanded}）}
/>
);
}
}
render（，document.getElementById（“根”））；

onClose函数中有一个错误。将其更改为：

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

----编辑----

读了一点之后，我发现了问题： 首先，您不需要实现所有这些onClick、onOpen和onClose函数。 您只需在Dropdown.Item上添加stopPropagation（）。 查看此代码-让我知道这是否适用于您：

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
  };

  render() {
    return (
      <div>
        <Dropdown
          className="icon"
          selection
          text="Select"
        >
          <Dropdown.Menu>
            <Dropdown.Item onClick={(e) => e.stopPropagation()}>
              <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"));

从“React”导入React；
从“react dom”导入{render}；
从“语义ui反应”导入{Dropdown}；
从“反应复选框树”导入复选框树；
导入“react checkbox tree/lib/react checkbox tree.css”；
常量节点=[
{
值：“火星”，
标签：“火星”，
儿童：[
{值：“火卫一”，标签：“火卫一”}，
{值：“deimos”，标签：“deimos”}
]
}
];
类应用程序扩展了React.Component{
状态={
已勾选：[]，
扩展：[]，
选项：[]，
开放：假
};
render（）{
返回(
e、 stopPropagation（）}>
this.setState（{checked}，（）=>{
console.log（this.state.checked）；
})
}
onExpand={expanded=>this.setState（{expanded}）}
/>
);
}
}
render（，document.getElementById（“根”））；

但扩展树会关闭droddown。我希望它完好无损。只有当我点击下拉菜单时，它才应该切换（打开/关闭），但扩展树会关闭droddown。我希望它保持完整。只有当我点击下拉菜单时，它才会切换（打开/关闭）