他の要素の状態を変更する要素をオンクックします。

Question

リストの順序を変更するトリガーとなるソートアイコンをクリックしようとしています。

もっと簡単にするために、ボタンと別のボタンがあり、それらがお互いに別々のdivにあるとします。

<div> 
    //Button 1 
    <button onclick={"some_click_handler"}> 
</div> 

<div> 
    //Button 2 
    <button> 
     {this.state.someToggle ? true : false} 
    </button> 
</div> 

Answer 1

コールバックをボタンに渡すコンポーネントを作成すると、このコールバックによってコンテナの状態が更新され、リストの小道具が設定されます。これはReactでは非常に一般的であり、構成パターンがどのように機能するかの基礎となります。 2つのコンポーネント間でデータを共有する必要がある場合は、それらをコンテナに入れ、その状態を親コンポーネントに持ち上げるだけです。これらのコンポーネントは通常、コンテナと呼ばれ、その上にドキュメントの束があります。

これは良い出発点である。このようなhttps://reactjs.org/docs/lifting-state-up.html

何か...

class Container extends React.Component { 
    constructor(props) { 
    super(props); 

    // Don't forget to bind the handler to the correct context 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(sort) { 
    this.setState({sort: sort}); 
    } 

    render() { 
    return (
     <Button handleClick={this.handleClick} /> 
     <List sort={this.state.sort} /> 
    ) 
    } 
}