当我选择MenuItem ReactJS时，handleClick selected true

Question

我正在使用ReactJS框架开发一个web应用程序。

我正在尝试编写一个事件，当我单击集合中的一个元素时，它会将所选属性的值更改为true，并将其余元素设置为false。

<NavigationButton to="/" label="Dashboard" exact>
<MenuItem className={classes.menuItem} selected={/* true when I click this */}>
<ListItemIcon className={classes.icon}>
<Home />
</ListItemIcon>
<ListItemText classes={{ primary: classes.primary }} inset primary="Strona główna" />
</MenuItem>
</NavigationButton>
<NavigationButton to="/payment" label="Payment" exact>
<MenuItem className={classes.menuItem} selected={/* false */}>
<ListItemIcon className={classes.icon}>
<Payment />
</ListItemIcon>
<ListItemText classes={{ primary: classes.primary }} inset primary="Moje płatności" />
</MenuItem>
</NavigationButton>

我该怎么做？

Answer 1

您可以在状态中设置当前选定的值，并在单击时更新它。

<NavigationButton to="/" label="Dashboard" exact>
<MenuItem className={classes.menuItem} selected={this.state.selected === "Dashboard"} onClick={() => {
this.setState({selected: "Dashboard"})
}}>
...
</MenuItem>
</NavigationButton>
<NavigationButton to="/payment" label="Payment" exact>
<MenuItem className={classes.menuItem} selected={this.state.selected === "Payment"}} onClick={() => {
this.setState({selected: "Payment"})
}}>
...
</MenuItem>
</NavigationButton>

编辑：

仔细想想，由于您似乎在使用react-router v4，您可以简单地添加match.url:的检查

<NavigationButton to="/" label="Dashboard" exact>
<MenuItem className={classes.menuItem} selected={props.match.url === "/"}>
...
</MenuItem>
</NavigationButton>
<NavigationButton to="/payment" label="Payment" exact>
<MenuItem className={classes.menuItem} selected={props.match.url === "/payment"}>
...
</MenuItem>
</NavigationButton>