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

【问题标题】：How to show drop menu and hide others in React.js如何在 React.js 中显示下拉菜单并隐藏其他菜单
【发布时间】：2015-07-07 19:32:40
【问题描述】：

我只想知道最好的方法（不需要代码，只需要方法）。当我点击它的 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：

提前致谢。

【问题讨论】：

如果它满足您的需求，这是一种不错的方法。当谈到编程风格时，“最佳”通常是主观的。

标签： javascript html css reactjs

【解决方案1】：

因此，假设您的下拉菜单都相互依赖，即当您单击其他下拉菜单时，其他人会关闭等...而不是它们都应该使用相同的对象构建并归因于将其传递给父级的单击事件.

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

请记住，您需要使用 bind 方法才能让孩子知道点击了哪一个（以采取适当的行动）

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

仅供参考，我没有测试此代码，这只是一个粗略的想法。您很可能会执行某种 for 循环来渲染这些子元素。记住绑定，否则你会被烧死的。

【讨论】：