语义下拉菜单触发多个事件

Question

我正在尝试实现以下行为。单击下拉菜单时，应将树显示为一个选项，并且对树进行的任何操作都应使下拉菜单保持打开状态。它应该只在再次单击下拉菜单时关闭，并且在外部 click.I 上使用 onClick、onClose 和 onOpen 处理程序。但不知何故 onclick 和 onclose 是冲突的。有人可以帮我实现这个目标吗？

沙盒：https://codesandbox.io/s/semantic-ui-react-so-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>
    );
  }
}

Answer 1

您的 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"));

语义下拉菜单触发多个事件

Multiple events gets triggered on a semantic dropdown

javascript

reactjs

events

semantic-ui

semantic-ui-react