2017-05-04 22 views
0

Material uiというMenuItemを使用しようとしています。だから私はしている:React:onItemTouchTapを使用して背景色を変更する

<Paper style={style.paper}> 
    <Menu onItemTouchTap={onItemTouchTapCb}> 

      <MenuItem primaryText="Accès rapides" leftIcon={<RemoveRedEye />} style={style.menuTitle} /> 
      <MenuItem primaryText="Tous les documents" /> 
      <MenuItem primaryText="Mes documents" /> 
      <Divider /> 
      <MenuItem primaryText="Nouveaux" /> 
      <MenuItem primaryText="Documents à observer" /> 

    </Menu> 
</Paper>  

私は私がそれをクリックすると、項目の背景色を変更するには、コールバックonItemTouchTapCbを呼び出します。しかし、私はこの機能を実装する方法を知らない:

function onItemTouchTapCb() { 
    console.log("ok") 
} 

アイデアはありますか?

<Paper style={style.paper}> 
<Menu 
    onItemTouchTap={this.onItemTouchTapCb}> 
</Menu> 

あなたがコンテキストを起動する必要がある場合は、あなたの関数は次のように見ているだろう、注意してください:

onItemTouchTapCb =() => { 
    console.log("ok") 
} 

答えて

0

はありがとうローカル状態を使って、このようなものを使って2つの色を切り替えることができます。

constructor(props) { 
    super(props); 
    this.state = { 
     backgroundColor: true 
    }; 
} 

そして、あなたのスタイルオブジェクト:

style = { 
    paper: { 
     backgroundColor: this.state.backgroundColor ? 'red' : 'blue' 
    } 
} 

そして、あなたの機能:

onItemTouchTapCb =() => { 
    this.setState({backgroundColor: !this.state.backgroundColor}) 
} 

ペーパー:

<Paper style={style.paper}> 
    <Menu 
     onItemTouchTap={this.onItemTouchTapCb}> 
    </Menu> 
</Paper> 
あなたのコンストラクタでは(あなたがES6クラスを使用していると仮定)

複数のCSS pを操作する必要がある場合2色以上の背景色を変更するには、Victorが答えているようにclassNameを使用します。必要に応じて、ローカルの状態で同じロジックを使用してclassNameを変更できます。

+0

あなたの答えをありがとう、私はあなたに同意しますが、機能の形式については、私の問題は、これをクリックするとアイテムの背景色を変更する方法ですか? CSSのプロパティを呼び出すことはできますか? –

+0

はい、CSSのプロパティは正常に動作します。複数のCSSプロパティを変更する必要がある場合は、別のclassNameでコンポーネントを再レンダリングすることができます –

0

ます場合はちょうどこのような

関連する問題