Reactjs “在列表中切换”项目不应响应“切换”元素外部的单击_Reactjs_Material Ui

Reactjs “在列表中切换”项目不应响应“切换”元素外部的单击

reactjs material-ui

Reactjs “在列表中切换”项目不应响应“切换”元素外部的单击,reactjs,material-ui,Reactjs,Material Ui,我正在我的react项目中使用材质ui。我希望切换仅在单击切换元素时有效，而不是列表项的任何其他部分。我如何实现这一点 <List> <Subheader>Priority Interruptions</Subheader> <ListItem primaryText="Events and reminders" rightToggle={<Toggle />} /> <ListItem primaryText="Ca

我正在我的react项目中使用材质ui。我希望切换仅在单击切换元素时有效，而不是列表项的任何其他部分。我如何实现这一点

<List>
  <Subheader>Priority Interruptions</Subheader>
  <ListItem primaryText="Events and reminders" rightToggle={<Toggle />} />
  <ListItem primaryText="Calls" rightToggle={<Toggle />} />
  <ListItem primaryText="Messages" />
</List>


优先中断

创建一个名为

toggleComponent

的状态键，并在单击时使用toggle元素进行设置。如果

this.state.toggleComponent===toogleElementID

显示切换

使用此选项，一次只能切换一个元素