React component self state（UI状態）

Question

私はReact-toolboxダイアログを使用しています。メッセージと閉じるボタンのダイアログを表示するalert()のように動作する単純な確認ダイアログとしてラップしたいと思います。

はので、私は、しかし、私はちょうど自分がダイアログを閉じるには閉じるボタンをしたいと思い、私はそれを必要なときに確認ダイアログが表示されますので、この

const ConfirmationDialog =({active, size, title, message}) => { 

    const onClickConfirm =()=> { 
    active = false; 
    } 

    return (
     <Dialog 
     active={active} 
     title={title} 
     type={size} 
     > 
     <p>{message}</p> 
      <button onClick={onClickConfirm}>Close</button> 
     </Dialog> 
); 
} 

export default ConfirmationDialog; 

activeのように私のプレゼンテーションコンポーネントは小道具から来ています。

実際にhandleOnClose関数を渡す必要がありますか？このコンポーネントを使用するたびにその関数を渡す必要があります。 、または、私は実際にそのような単純なアクションを達成するためにコンテナクラスを作成する必要がありますか？

Answer 1

あなたはクラスとしてごConfirmationDialogコンポーネントを作成し、そこにactive変数を格納するためのローカルの状態を使用することができます。

import React, { Component, PropTypes } from 'react'; 

class ConfirmationDialog extends Component { 
    constructor(props) { 
    super(props); 

    // Setting `active` state property from props. 
    this.state = { 
     active: props.active, 
    }; 

    // As we are passing this function as event handler, we need bind context, 
    // to get access to `this` inside this function. 
    this.handleCloseClick = this.handleCloseClick.bind(this); 
    } 

    componentWillReceiveProps(nextProps) { 
    // When we will provide `active` variable via props, we will automatically set it to state. 
    if (nextProps.active !== this.props.active) { 
     this.setState({ 
     active: nextProps.active, 
     }); 
    } 
    } 

    handleCloseClick() { 
    // On clicking `close` button, setting `active` state variable to `false`, 
    // it forces component to rerender with new state. 
    this.setState({ 
     active: false, 
    }); 
    } 

    render() { 
    const { title, size, message } = this.props; 
    // Getting `active` variable from state, instead of props. 
    const { active } = this.state; 
    return (
     <Dialog 
     active={active} 
     title={title} 
     type={size} 
     > 
     <p>{message}</p> 
     <button onClick={this.handleCloseClick}>Close</button> 
     </Dialog> 
    ); 
    } 
}; 

Answer 2

あなたが直接あなたのコード内で小道具を修正しています。私はこのコードが動作するのだろうかと思います。それはしないでください。

コンポーネントの状態のどこかに、activeのthingyを格納する必要があります。これは、このコンポーネントの1つまたは上位コンポーネントの可能性があります。

これは簡単だと思われますが、実際にはではありません。と反応しやすいです。 this tutorialをチェックしてください。ここで私はモーダルポップアップでthings like thatを行う方法を説明しています。