如何在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
                    )
                )
            );
        }
    });

这是完整的代码 ：

提前致谢。

Answer 1

因此，假设您的下拉列表相互依赖，即。 当您单击一个对象时，其他对象关闭等，那么它们都应该使用同一对象构建，并归因于将其传递给父对象的click事件。

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

请记住，您需要使用bind方法，以便孩子知道单击了哪个孩子（采取适当的措施）

因此，总结起来，您的父组件应该有一个状态变量，该状态变量说明要显示并设置某种变量的状态变量，并可能为其指定元素名称或其他名称。 这样，如果未按状态显示该元素，则其他元素将保持关闭状态。

仅供参考，我没有测试此代码，这只是一个大概的想法。 您很可能会执行某种for循环来呈现许多这些子元素。 记住绑定，否则您会被烫伤。