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

Question

我有以下反应组件，将用于切换菜单：

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>
        )
    }
});

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

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>
        )
    }
});

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

结果是状态已切换但未设置“whenClicked”。需要设置whenClicked，因为父组件“Menu”会监听“menuToggle”中的“whenClicked”。当“Menu”听到“whenClicked”时，它会触发“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>
        )
    }

});

有没有一种方法可以通过单击事件切换状态并设置 'whenClicked' 属性？

Answer 1

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

1. 切换组件的状态
2. 通过 props 将触发器传递给父级

如果上述假设成立，那么我的建议如下：

1. 至于约定，使用“on”和“handle”作为前缀
2. 类名可能是一个很好的学习工具，因为 Facebook 也在使用它
3. 由于设置状态是异步的，因此您可以使用其回调函数在设置状态时触发事件。
4. 将新状态传递给其父级是让父级了解子级状态的好习惯

这是修改后的版本：

var MenuToggle = React.createClass({
    getInitialState: function() {
        return {
            isOpen: false
        };
    },
    _handleClick: function(e) {
        e.preventDefault();
        this.setState({isOpen: !this.state.isOpen}, function() {
            this.props.onClick(this.state.isOpen);
        });
    },
    render: function() {
        var iconClass = classNames('fa', this.state.isOpen ? 'fa-times' : 'fa-bars');
        return(
            <a id="menu-toggle" onClick={this._handleClick}>
                <i className={iconClass}></i>
            </a>
        )
    }
});

希望这有帮助 =)