setStateはbooleanパラメータの値を変更していません

Question

私はReactのモーダルで作業しており、アプリケーションのどこかで正常に動作しています。ただし、次のコードスニペットではthis.state.displayは決してfalseに設定されていません。私はその周りのログをコンソールで見ることができますが、関数が起動していることを確認してください。this.state.displayは、ライフサイクル全体の初期化後にtrueに設定されています。

class AdvancedToDoModal extends Component { 
    constructor(props) { 
    super(); 
    this.state = { 
     display: false, 
     modalContent: this.fetchModalContent(props) 
    } 

    this.fetchModalContent = this.fetchModalContent.bind(this); 

    this.numberInput = this.numberInput.bind(this); 
    this.dateInput = this.dateInput.bind(this); 
    this.showModal = this.showModal.bind(this); 
    this.hideModal = this.hideModal.bind(this); 
    } 

    numberInput() { 
    return (
     <div>Number Input</div> 
    ) 
    } 

    dateInput() { 
    return (
     <div>Date Input</div> 
    ) 
    } 

    showModal() { 
    this.setState({ display: true }) 
    } 

    hideModal() { 
    console.log('hide') 
    this.setState({ display: false },() => { 
     console.log('display is always true: ', this.state) 
    }); 
    } 

    fetchModalContent(props) { 
    var modalContent; 

    if (props.inputType === 'number') { 
     modalContent = this.numberInput(); 
    } else if (props.inputType === 'date') { 
     modalContent = this.dateInput(); 
    } else { 
     modalContent = null; 
     console.log('Unknown inputType'); 
    } 

    return modalContent; 
    } 

    render() { 
    return (
     <div onClick={this.showModal} className={this.state.display} style={{height: '100%', width: '100%'}}> 
     <Modal display={this.state.display} title={this.props.title} onClose={this.hideModal} > 
      {this.state.modalContent} 
     </Modal> 
     </div> 
    ) 
    } 
} 

何か指摘したいと思います！

Answer 1

あなたのコードの問題は、閉じるボタンをクリックすると状態を設定する親要素に1つのonClickハンドラがあることです。あなたがtrueにdisplay状態を設定showModalを呼び出すのonClickハンドラを持っている

render() { 
    return (
     <div onClick={this.showModal} className={this.state.display} style={{height: '100%', width: '100%'}}> 
     <Modal display={this.state.display} title={this.props.title} onClose={this.hideModal} > 
      {this.state.modalContent} 
     </Modal> 
     </div> 
    ) 
    } 

ここでは、ルートのdivであなたのレンダリング機能を見てください。今度はあなたのhideModalを呼び出すクローズボタンをモーダルでクリックすると、親divのonClickが呼び出され、再び状態をtrueに設定します。したがって、あなたのdisplay状態は常に真のままです。このonClickハンドラを削除すると修正されます。