如何在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”圖標。 我還需要向組件添加一個道具，以便可以通過偵聽“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>
        )
    }
});

基本上，我正在調用單個函數“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. 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

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