如何在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. 通过道具
将触发器传递给父级

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

1. 按照惯例，使用“on”和“handle”作为前缀
2. classnames可能是一个很好的学习工具，因为fb也在使用它
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>
        )
    }
});

希望这有助于=）

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;