web-dev-qa-db-ja.com

反応中の状態に小道具値を割り当てる方法

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

そして、これは現時点でのオーバーレイです。

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値を割り当てて使用するにはどうすればよいですか？

よろしく、JP

reactjsbabeljs
6
Fraccier

OverlayViewコンポーネントにcomponentWillReceiveProps（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>
       );
    }
}

完全な実例： https://codesandbox.io/s/35wLR4nA

8
itumb
constructor(props, context) {
    super(props, context);
     this.state = {
           value: ''
      };
   }

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

最後に、クラスを変更するプロパティを保存しましたが、そのように悪くはありません。そして私はこれの助けを借りて修正しました： React.jsの親コンポーネントに小道具を渡します そしてもちろん仕事仲間の助けを借りて。最終バージョンはこれです：

これは親です：

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

これは子供です：

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

これですべてが正常に機能します。

1
Fraccier

問題は、thisを使用してクラスの小道具をフェッチしようとしていることである可能性があります。コンストラクターに渡された小道具を使用することになっていると思います。

このような：

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

ただし、次のように1行で実行しない理由はわかりません。this.setState = { open: props.isOpen };

1
magnudae