ReactJS - 別のコンポーネントからモーダルを開くことができます

Question

"model.js"のモデルを別のコンポーネント（list.js）のボタンをクリックして呼び出すようにしようとしています。以下：

model.js

import React from 'react'; 

class Model extends React.Component{ 

render(){ 
    return(
    <div> 
    //code inside the Model etc... 
    <Button onClick={this.submit.bind(this)}>Submit</Button> 
    </div> 
) 
} 
} 

export default Model; 

list.js

import Model from './model'; 
class List extends React.Component{ 
render(){ 

    constructor() { 
    super(); 

    this.toggleModal = this.toggleModal.bind(this); 
    this.state = { 
    open: false 
    } 
    } 

    toggleModal() { 
    this.setState({ 
    open: this.state.open 
    }); 
    } 

return(
<div> 
    <Button onClick={this.toggleModal}>Add</Button> 
</div> 
<div> 
    <Model open={this.state.open} toggleModal={this.toggleModal}/> 
</div> 
) 
} 
} 

export default List; 

私は、リスト内のイベントハンドラのコードを変更する多くの方法を試してみましたが、それはまだdoesntの仕事しています。

あなたが私に手を差し伸べて問題がどこにあるのかを指摘できれば、私は前進することができます。

Answer 1

なぜあなたは真または偽

に状態 open値を変更していない

this.setState({ 
    open: this.state.open 
}); 

上記のコードは常にfalseとして値を設定します。おそらくあなたができることは!this.state.open

Answer 2

です。今のところ、ボタンをクリックすると常にfalseの値が割り当てられるので、間違いなく間違いがあります。モーダルは表示されません。 問題仲間

this.setState({ 
    open: !this.state.open 
});