如何在反应中将prop值分配给状态 [英] How to assign a prop value to a state in react

问题描述

我有一个叠加层，它是从另一个React组件启动的，该组件具有一个也会更改自身的按钮.更改发生在用户单击按钮时，然后按钮更改了它的类名.它还将prop值发送到子元素(即叠加层).叠加层会根据属性以及是否单击来添加一个类.一切工作都很好，但是现在我不得不做另一件事.当用户单击叠加层时，它必须关闭.在进行此更改之前，所有功能都适用于我之前提到的按钮.

I have an overlay which is launched from another React component which have a button that also changes itself. The change happens when the user clicks the button, then the button changes it's classname. It also sends a prop value to the children component which is the overlay. The overlay adds a class depending on the property and if it is clicked. Everthing is working pretty nice, but now I have to do another thing. When a user click on the overlay, it have to close up. Before this change, everything was working for the button I mentioned earlier.

这是按钮组件:

export default class StatusBarButton extends React.Component {

    constructor(props) {
        super(props)
        this.state = {active: false}
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ active: !this.state.active });
    }

    render() {
        var cx = require('classnames');
        var button = cx ({
            'statusbar-button-container' : true,
            'active' : this.state.active
        });
        var animation = cx ({
            'statusbar-button-cross-image' : true,
            'rotate' : true,
            'active' : this.state.active
        });

        return (
            <div className="astatusbar-center-wrapper">
                <div className={button} onClick={this.handleClick}>
                    <img src="images/navbar-element-icon-cross.png" className={animation}/>
                </div>      
                <OverlayView isOpen={this.state.active} />
            </div>
        );
    }
}

这是目前的叠加层:

export default class OverlayView extends React.Component {
    constructor (props){
        super(props);
        this.state = {open: false}
        this.setState({ open: this.props.isOpen });
    }



    render() {
        var cx = require('classnames');
        var overlay = cx({
            'overlay': true,
            'overlay-slidedown': true,
            'open': this.state.open
        });

        return (    
            <div className={overlay} onClick={this._closeOverlay}>
                <div className="overlay-menu-wrapper">
                    <OverlayNewInvoiceButton />
                    <OverlayNewBudgetButton />
                    <OverlayNewTicketButton />
                </div>
            </div>
        );
    }
}

如您所见，我正在尝试获取prop值并将其分配给状态，但是它不起作用.如何将prop值分配给状态并使用它?

As you see I'm trying to get the prop value and assign it to the state, but it's not working. How can I assign the prop value to the state and use it?

关于， JP

推荐答案

您在OverlayView组件中缺少componentWillReceiveProps(props)方法.

You are missing componentWillReceiveProps(props) method in your OverlayView component.

export default class OverlayView extends React.Component {
    constructor (props){
        super(props);
        this.state = {open: props.isOpen}
    }

    componentWillReceiveProps(props) {
        this.setState({open: props.isOpen});
    }

    render() {
        let open = '';
        if (this.state.open === true) {
            open = 'open';
        }

        let overlayClass = `overlay overlay-slidedown ${open}`;

        return (    
            <div className={overlayClass} onClick={this._closeOverlay}>
                <div className="overlay-menu-wrapper">
                    <span>{open}</span>
                </div>
            </div>
       );
    }
}

完整的工作示例: https://codesandbox.io/s/35wLR4nA

这篇关于如何在反应中将prop值分配给状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！