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

所以假设你的下拉都是相互依赖的，也就是说当你点击其中一个关闭等等时，它们都应该用相同的对象构建，并归因于一个将这个传递给父母的点击事件。

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

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

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

是的，我没有测试这段代码，这只是一个粗略的想法。很可能你会做一些for循环来渲染许多这些子元素。记住绑定，否则你会被烧毁。

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

1 个答案: