React.jsのボタンをクリックするとリストの下のリストを表示非表示にするには？

Question

私のコンテナコードを以下に示します。私は別のコンポーネントから呼び出しています。別のリストの下にあるリストを展開/折りたたむ必要があります。 に私が持っているCollapseとExpandの

return this.props.labresult.map(test => { 
    return (
    <div> 
     <ul className='Result-list'> 
     <li key={test.testId}> 
      <div> 
      <div className='Result-list__title'> 
       <span> {test.testName}</span> 
      </div> 
      <div className='Flt-rt' > 
       <IconButton tooltip="Collapse"> 
       <ContentRemoveCircle /> 
       </IconButton> 
       <IconButton tooltip="Expand"> 
       <ContentAddCircle /> 
       </IconButton> 
      </div> 
      </div> 
      <div className='Clearfix' /> 
      <div className='Border-all'> 
      { 
       test.labresultList.map(result => { 
       return (
        <li key={result.labresultId} > 
        <div> 
         <div> 
         <IconButton tooltip="Edit" key={result.labresultId} onClick={() => this.props.editLabResult(result)}> 
          <EditorModeEdit /> 
         </IconButton> 
         <span> {result.loincCodeName} &nbsp;</span>   
         </div> 
         <div> 
         <span> <b>status:</b> {result.status}</span> 
         <span> {result.value}{result.uom} </span> 
         </div> 
        </div> 
        <div className='Clearfix' /> 
        </li> 
       ) 
       }) 
      } 
      </div> 
     </li> 
     </ul > 
    </div> 
); 
}); 

今onClickショー/test.labresultListを非表示にします。どうすればこれを達成できますか？

Answer 1

まず、ネストされたdivを独自のコンポーネントに分割することをお勧めします。より多くのネストがあれば複雑になります。私はさらに<li>タグを自分のコンポーネントとして配置し、その小道具を渡すことをお勧めします。

だから、より次のようになります。

return this.props.labresult.map((test) => { 
    return (
     <div> 
      <ul className='Result-list'> 
       <Test key={test.testId} {...test} /> 
      </ul> 
     </div> 
    ) 
} 

とあなたも他の子コンポーネントをばらばらにすることができますTestコンポーネントインチ

<li> 
    <div> 
     <div className='Result-list__title'> 
      <span> {this.props.testName}</span> 
     </div> 
     {/*----- all other stuff here ------------*/} 
     <div className='Border-all'> 
      {this._renderLabResults()} 
     </div> 
    </div> 
</li> 

[OK]を元の質問に戻します。これを行うにはいくつかの方法があります：

• あなたはcollapsedブール状態を作り、コンストラクタでfalseにそれをデフォルト（すなわち、this.stateまたはthis.setStateを使用して）成分のみの状態を使用している場合。ユーザーがこの状態を変更するボタンをクリックすると、その値に基づいてtest.labresultListをフィルタリングできます。
• Reduxのような状態コンテナを使用している場合、Redux状態を使用してアクションをディスパッチできます。この小道具を変更するボタンをクリックすると、コンポーネントに渡されたRedux状態の値に基づいてtest.labresultListをフィルタリングできます。

collapsedブール値の小道具の場合は、単にコンポーネントの状態を使用することをおすすめします。これは単一のコンポーネントにのみ固有であり、この値をグローバルRedux状態に保つ必要はありません。あなたが他の理由でそれを必要としない限り。

this.state = { 
    collapsed: false, 
}  

ユーザがそうのような折りたたまブール使用setStateを切り替えるボタンをクリック：_renderLabResults()でthis.setState({collapsed: !this.state.collapsed})

は、適切な子コンポーネントをレンダリングするために条件を使用Testのコンストラクタにおいて

。

_renderLabResults() { 
    if (!this.state.collapsed) { 
        // Not collapsed...render the test result here 
    } 
    return null  // Collapsed...render nothing 
}