Reactjs 如何为react中的状态指定属性值

我有一个覆盖，它是从另一个React组件启动的，该组件有一个按钮，该按钮本身也会改变。更改发生在用户单击按钮时，然后按钮更改其类名。它还向作为覆盖的子组件发送一个prop值。覆盖将根据属性和单击的情况添加一个类。一切都很顺利，但现在我必须做另一件事。当用户单击覆盖时，它必须关闭。在此更改之前，我前面提到的按钮的所有功能都正常工作

这是按钮组件：

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

导出默认类StatusBarButton扩展React.Component{
建造师（道具）{
超级（道具）
this.state={active:false}
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
this.setState（{active:！this.state.active}）；
}
render（）{
var cx=require（'classnames'）；
var按钮=cx({
“状态栏按钮容器”：true，
“活动”：this.state.active
});
var动画=cx({
“状态栏按钮交叉图像”：true，
“旋转”：true，
“活动”：this.state.active
});
返回(
);
}
}

这是目前的叠加图：

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

导出默认类OverlyView扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={open:false}
this.setState（{open:this.props.isOpen}）；
}
render（）{
var cx=require（'classnames'）；
var overlay=cx({
“覆盖”：正确，
“overlay slidedown”：真，
“打开”：this.state.open
});
报税表（
);
}
}

正如你所看到的，我试图获取prop值并将其分配给state，但它不起作用。如何将道具值指定给状态并使用它

问候,，

---

JP

您的问题可能是您正试图使用

此

获取类道具。我认为你应该使用传递给构造器的道具

像这样：

constructor (props){
    super(props);
    this.state = {open: false}
    this.setState({ open: props.isOpen });
}

---

不确定为什么不在一行中这样做：

this.setState={open:props.isOpen}
最后，我保存了更改类的属性，这样做还不错。我在这个帮助下进行了修复：当然还有一个同事的帮助。最终版本如下：

这是家长：

export default class StatusBarButtonView_Profit extends React.Component {

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

    _openOverlay() {
        if (this.state.active == false) {
            this.setState({ active: true });
            console.log('boton lanza overlay');
        } else {
            this.setState({ active: false });
            console.log('boton cierra overlay');
        }
    }

    _closeOverlay(Overlay) {
        if (this.state.active == true) {
            this.setState({ active: false });

        } else {
            this.setState({ active: true });
        }
    }

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

        return (
            <div className="aui-profif-statusbar-center-wrapper">
                <div className={button} onClick={this._openOverlay}>
                    <img src="images/aui-navbar-element-icon-cross.png" className={animation}/>
                </div>      
                <OverlayView_Profit isOpen={this.state.active} onClick={this._closeOverlay}/>
            </div>
        );
    }
}

导出默认类StatusBarButtonView\u.Component{
建造师（道具）{
超级（道具）
this.state={active:false}
this.\u openOverlay=this.\u openOverlay.bind（this）
this.\u closeOverlay=this.\u closeOverlay.bind（this）
}
_openOverlay（）{
if（this.state.active==false）{
this.setState（{active:true}）；
console.log（'boton lanza overlay'）；
}否则{
this.setState（{active:false}）；
console.log（'boton cierra overlay'）；
}
}
_闭合覆盖（覆盖）{
if（this.state.active==true）{
this.setState（{active:false}）；
}否则{
this.setState（{active:true}）；
}
}
render（）{
var cx=require（'classnames'）；
var按钮=cx({
“aui利润状态栏按钮容器”：true，
“活动”：this.state.active
});
var动画=cx({
“aui利润状态栏按钮交叉图像”：true，
“旋转”：true，
“活动”：this.state.active
});
返回(
);
}
}

这是孩子：

export default class OverlayView_Profit extends React.Component {
    constructor (props){
        super(props);

    }

    _closeOverlay() {
        this.props.onClick();
    }

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

        return (    
            <div className={overlay} onClick={this._closeOverlay.bind(this)}>
                <OverlayNewInvoiceButtonView_Profit />
                <OverlayNewBudgetButtonView_Profit />
                <OverlayNewTicketButtonView_Profit />
            </div>
        );
    }
}

导出默认类OverlayView\u.Component{
建造师（道具）{
超级（道具）；
}
_closeOverlay（）{
this.props.onClick（）；
}
render（）{
var cx=require（'classnames'）；
var overlay=cx({
“aui覆盖”：正确，
“aui叠加向下滑动”：正确，
“打开”：this.props.isOpen
});
报税表（
);
}
}

现在一切正常。
您缺少的组件将在OverlayView组件中接收props（props）方法

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

导出默认类OverlyView扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={open:props.isOpen}
}
组件将接收道具（道具）{
this.setState（{open:props.isOpen}）；
}
render（）{
让开放=“”；
if（this.state.open==true）{
开放=‘开放’；
}
让overlayClass=`overlay-slidedown${open}`；
报税表（
{open}
);
}
}

完整工作示例：
我试过用户WayneC说，
this.state={open:this.props.isOpen}
但它不起作用。谢谢你的帮助，但它不能用你提到的任何方式工作。属性是传递给子组件还是在此之前停止？该属性被传递给子组件，在执行此操作之前，我正在执行类似于“打开”的操作：在类名中使用this.props.isOpen，它工作正常，但我必须更改它。
警告：setState（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是禁止操作。请检查以下代码。。。组件
现在已弃用组件
constructor(props, context) {
    super(props, context);
     this.state = {
           value: ''
      };
   }

   componentWillReceiveProps(){ //this is called to before render method
    this.setState({
       value:this.props.data
     })