如何在 React.js 中显示下拉菜单并隐藏其他菜单

Question

我只想知道继续的最佳方式（不需要代码，只需要这样做的方式）。当我点击它的 LI 元素时，我试图显示一个下拉菜单。

var Balloon = React.createClass({displayName: "Balloon",
        getInitialState: function() {
            return { shaded: false };
        },         
        handleClick: function(event) {
            this.setState({ shaded: !this.state.shaded });
        },
        render: function() {

            var panel = this.state.shaded ? React.createElement(BalloonPanel, {type: this.props.type, data: this.props.data}) : "";

            return (
                React.createElement("li", {onClick: this.handleClick}, 
                    React.createElement("a", {href: ""}), 
                    React.createElement("div", {hidden: true}), 
                    React.createElement("div", null, 
                        React.createElement("div", {class: "triangle"}, " "), 
                        panel
                    )
                )
            );
        }
    });

完整的code:

提前致谢。

Answer 1

所以假设你的下拉菜单都相互依赖，即当你点击一个时，其他的关闭等等......它们都应该用相同的 object 构建并归因于点击事件将其传递给 parent。

var ParentComponent = React.createClass({
clicked: function () {
  alert("you clicked me");
},
return: function () {
   render (
       <ReactListChild  onClick={this.props.clicked.bind(this)} />
    )
});

请记住，您需要使用绑定方法，以便 children 知道点击了哪一个（以采取适当的操作）

所以总而言之，您的 parent 组件应该有一个状态变量，说明要显示哪一个并设置某种变量，可能给它元素的名称或其他东西。这样，如果该元素未如状态所示列出，则其他元素将保持关闭状态。

仅供参考，我没有测试这段代码，这只是一个粗略的想法。您很可能会执行某种 for 循环来呈现其中许多 child 元素。记住绑定，否则你会被烧死的。

如何在 React.js 中显示下拉菜单并隐藏其他菜单

How to show drop menu and hide others in React.js

html

javascript

css

reactjs