语义下拉菜单触发多个事件
Multiple events gets triggered on a semantic dropdown
我正在尝试实现以下行为。单击下拉菜单时,应将树显示为一个选项,并且对树进行的任何操作都应使下拉菜单保持打开状态。它应该只在再次单击下拉菜单时关闭,并且在外部 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>
);
}
}
您的 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"));
我正在尝试实现以下行为。单击下拉菜单时,应将树显示为一个选项,并且对树进行的任何操作都应使下拉菜单保持打开状态。它应该只在再次单击下拉菜单时关闭,并且在外部 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>
);
}
}
您的 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"));