如何在 reactjs 中设置单个单击事件的状态和 props

How to set state and props on a single click event in reactjs

本文关键字：事件状态 props 单击单个 reactjs 设置更新时间：2023-09-26

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

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"，它应该设置/切换"菜单切换"的状态，并添加"当点击"道具。

结果是状态被切换，但"当单击"未设置。需要设置何时单击，因为父组件"菜单"侦听"菜单切换"中的"何时单击"。当"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>
        )
    }
});

有没有办法切换状态并通过一键事件设置"何时点击"道具？

让我看看我是否可以理解这一点，当点击时：

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

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

对于约定，使用"on"和"handle"作为前缀
类名可能是一个很好的学习工具，因为 FB 也在使用它
由于 set 状态是异步的，因此您可以使用其回调函数在设置状态时触发事情。
将新状态传递给其父级是让父级知道子级状态的好做法

这是修改后的版本：

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

希望这有帮助=）

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