が反応：一度

Question

私はこのようになりますコンポーネントのドロップダウン持って示すドロップダウンコンポーネント：

{...} 
     this.state = { 
      isVisible: false 
     } 
    } 

    toggleDisplay() { 
     this.setState({isVisible: !this.state.isVisible}); 
    } 

    render() { 
     return (
      <div> 
       <button onClick={this.toggleDisplay()}>click</button> 
       {this.state.isVisible ? <MenuElements toggleDisplay={this.toggleDisplay} /> : '' } 
      </div> 
     ) 
    } 
} 

「MenuElementsは、」LIを持っているだけで、ULです。別のページでは、このコンポーネントを複数回使用していますので、ボタンをクリックするたびに、クリックごとに「MenuElements」が表示されます。問題は、私は1つのコンポーネントだけを表示したいということです。したがって、MenuElementsコンポーネントがすでに表示されている場合、別のボタンをクリックすると、前のコンポーネントが閉じられ、別のボタンが開きます。

これは私のコードでどのように実装できますか？

ありがとうございました。

Answer 1

私はこれがあなたのコールバックの文脈であると言いたいと思います。あなたは文脈を強制しようとしましたか？

<div> 
    <button onClick={this.toggleDisplay.bind(this)}> 
     click 
    </button> 
{this.state.isVisible ? 
    <MenuElements toggleDisplay={this.toggleDisplay.bind(this)} /> 
: '' } 
</div> 

Answer 2

どのようにして、どのMenuItemが表示されるかを定義する単一の状態を持つ必要があります。あなたはReduxのようなものでグローバルな状態になる可能性がありますが、再利用可能なコンポーネントを構築しようとしている場合は、親コンポーネントのすべてのMenuItemコンポーネントをラップしてそこに状態を保持するのが最善であると思います。それは、私が思うに、それをやるリアクションの方法です。コンポーネントを設計する方法のアイデアについては、https://facebook.github.io/react/docs/thinking-in-react.htmlをお読みください。

私はButton onClickハンドラにエラーがあると思います。 （おそらくReduxの、のようなものを使用して）*グローバル*状態を​​追跡

// Correct 
this.setState((prevState, props) => ({ 
    counter: prevState.counter + props.increment 
})); 

// Wrong 
this.setState({ 
    counter: this.state.counter + this.props.increment, 
});