反應：使用onItemTouchTap更改背景顏色

我正在嘗試使用材質UI的MenuItem。所以，我有：反應：使用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") 
}

你有什麼想法嗎？謝謝

來源

2017-05-04 Anaïs Saez

就像這樣：

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

要小心，如果你需要調用的情況下，你的函數將不得不尋找這樣的：

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

來源

2017-05-04 09:24:16

謝謝你的回答，我同意你的看法，函數的形式，但我的問題是如何改變項目的背景顏色，當我點擊這個？我可以調用CSS屬性嗎？ –

是的，一個CSS屬性會正常工作。如果必須修改多個CSS屬性，則可以使用不同的className重新呈現組件 –

如果您'使用本地狀態你可以使用這樣的東西在兩種顏色之間切換。在你的構造函數（假設你使用ES6類）：

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>

如果您需要操作多個CSS p或者在超過兩種顏色之間進行背景變化時，使用className，正如Victor在答案中所說的那樣。如果需要，可以使用與本地狀態相同的邏輯來更改className。

來源

2017-05-05 18:45:30 CaseyC

反應：使用onItemTouchTap更改背景顏色

回答

相關問題