Javascript 如何在reactjs中设置单击事件的状态和道具

我有以下react组件，用于切换菜单：

var MenuToggle = React.createClass({
    render: function() {
        return(
            <a id="menu-toggle" href="javascript:void(0);">
                <i id="closed" className="fa fa-bars"></i>
                <i id="open" className="fa fa-times"></i>
            </a>
        )
    }
});

var MenuToggle=React.createClass({
render:function（）{
返回(
)
}
});

单击此组件时，我需要切换其状态，使“汉堡”图标变为“x”图标。我还需要向组件添加一个道具，以便通过侦听“MenuToggle”组件接收道具来更新父菜单的状态。由于我需要基于相同的单击事件执行这两项操作，因此我尝试了：

var MenuToggle = React.createClass({
    getInitialState: function() {
        return {open: false}
    },
    handleClick: function() {
        var that = this;
        function setTheState() {
            that.setState({open: !that.state.open})
        }
        function setTheProps() {
            that.props.whenClicked
        }
        setTheState()
        setTheProps()
    },
    render: function() {
        return(
            <a id="menu-toggle" href="javascript:void(0);" onClick={this.handleClick} className={(this.state.open ? 'open' : '')}>
                <i id="closed" className="fa fa-bars"></i>
                <i id="open" className="fa fa-times"></i>
            </a>
        )
    }
});

var MenuToggle=React.createClass({
getInitialState:函数（）{
返回{open:false}
},
handleClick:function（）{
var=这个；
函数setTheState（）{
that.setState（{open:！that.state.open}）
}
函数setTheProps（）{
那是我的道具
}
设置状态（）
设置进程（）
},
render:function（）{
返回(
)
}
});

基本上，我调用单个函数“handleClick”，它应该设置/切换“MenuToggle”的状态，并添加“whenClicked”属性

结果是状态被切换，但未设置“whenClicked”。需要设置whenClicked，因为父组件“菜单”在“菜单切换”中侦听“whenClicked”。当“菜单”听到“whenclick”时，它会触发“handleClick”，切换自己的状态：

var Menu = React.createClass({

    getInitialState: function() {
        return {open: false, mobi: false}
    },
    handleClick: function() {
        this.setState({open: !this.state.open})
    },
    closeOnMobiScroll: function() {
        /*
        if(this.state.mobi === false) {
            this.setState({open: false})
        }
        */
    },
    updateDimensions: function() {
        $(window).width() >= 767 ? this.setState({mobi: true}) : this.setState({mobi: false});
    },
    componentWillMount: function() {
        this.updateDimensions();
    },
    componentDidMount: function() {
        $(window).on("resize", this.updateDimensions);
    },
    componentWillUnmount: function() {
        $(window).on("resize", this.updateDimensions);
    },
    render: function() {
        return (
            <div id="menu-wrap">
                <MenuToggle whenClicked={this.handleClick} />
                <div id="menu" className={(this.state.open ? 'open' : '')} >
                    <MenuTitle />
                    <MenuList whenClicked={this.handleClick}/>
                </div>
            </div>
        )
    }

});

var菜单=React.createClass({
getInitialState:函数（）{
返回{open:false，mobi:false}
},
handleClick:function（）{
this.setState（{open:！this.state.open}）
},
closeOnMobiScroll:function（）{
/*
if（this.state.mobi==false）{
this.setState（{open:false}）
}
*/
},
updateDimensions:function（）{
$（window.width（）>=767？this.setState（{mobi:true}）：this.setState（{mobi:false}）；
},
componentWillMount:function（）{
这个.updateDimensions（）；
},
componentDidMount:function（）{
$（window）.on（“resize”，this.updateDimensions）；
},
componentWillUnmount:function（）{
$（window）.on（“resize”，this.updateDimensions）；
},
render:function（）{
返回(
)
}
});

---

是否有一种方法可以切换状态并通过单击事件设置“whenClicked”道具

单击时，让我看看是否能理解这一点：

切换组件的状态

通过道具将触发器传递给家长

如果上述假设属实，那么我的建议如下：

至于惯例，使用“on”和“handle”作为前缀

可能是一个很好的学习工具，因为fb也在使用它

由于set state是异步的，所以可以在设置状态时使用其回调函数来触发事件

将新状态传递给其父级是让父级了解子级状态的一种良好做法

以下是修改后的版本：

var MenuToggle=React.createClass({
getInitialState:函数（）{
返回{
伊索彭：错
};
},
_handleClick:函数（e）{
e、 预防默认值（）；
this.setState（{isOpen:！this.state.isOpen}，函数（）{
this.props.onClick（this.state.isOpen）；
});
},
render:function（）{
var iconClass=classNames（'fa'，this.state.isOpen？'fa times'：'fa bar'）；
返回(
)
}
});
var MenuToggle=React.createClass({
getInitialState:函数（）{
返回{
伊索彭：错
};
},
_handleClick:函数（e）{
e、 预防默认值（）；
this.setState（{isOpen:！this.state.isOpen}，函数（）{
this.props.onClick（this.state.isOpen）；
});
},
render:function（）{
var iconClass=classNames（'fa'，this.state.isOpen？'fa times'：'fa bar'）；
返回(
)
}
});我不清楚这个.props.whenClicked
应该是什么，因为你没有用它做任何事情。通常情况下：所有者必须向组件传递回调，而您的组件必须调用它。例如，所有者执行
，而您的组件将执行
此.props.onClick（）
。所有者有责任更新其状态，并相应地重新发布和更新道具。好的，我也试图澄清并发布所有者的代码。然后你所要做的就是调用函数：
that.props.whenClicked（）
*我知道我缺少一些细节。。。我最初从内联事件中复制了它，但没有考虑更改的范围。谢谢如果在_handleClick（）中设置状态并将道具传递给家长，您的方法实际上是好的。谢谢，请解释你的问题。因此，这将有助于未来的游客。