Question

我正在尝试使用材质ui的MenuItem。所以我有：

<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")
}

你知道吗？谢谢

Answer 1

就像这样：

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

注意，如果你需要调用上下文，你的函数必须如下所示：

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

Answer 2

如果你正在使用本地状态，你可以使用这样的东西在两种颜色之间切换。在你的构造函数中（假设你使用的是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属性或者在两种以上颜色之间进行背景更改，请使用className，Victor在他的回答中说。如果需要，可以使用与本地状态相同的逻辑来更改className。

React：使用onItemTouchTap来改变backgroundcolor

2 个答案: