Question

我使用material-ui组件与react-router进行反应。当我想显示应该作为链接元素工作的列表项时，我有一个问题，但也包含一个不应该触发父链接的子菜单。它确实如此，我不知道如何禁用它。

var iconMenu =
    <IconMenu iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}>
      <MenuItem primaryText='change name' onTouchTap={this.edit}/>
      <MenuItem primaryText='delete' onTouchTap={this.delete} />
    </IconMenu>


<ListItem
          key={i}
          containerElement={<Link to={`/items/${item.id}`} />}
          rightIconButton={iconMenu}
/>

当我点击iconMenu按钮时，我不希望触发<Link to={`/items/${item.id}`} />，以便我留在页面中。但确实如此。那么我该如何解决这个问题呢？我试图添加事件处理程序来运行stopPropagation()，但它没有成功...

谢谢！

Answer 1

对于React Router v4，添加

onTouchTap={() => this.props.history.push(`/items/${item.id}`)}

到ListItem，而不是containerElement。

使用import { withRouter } from 'react-router-dom'和export default withRouter(Foo)将history添加到组件的道具中。

Answer 2

首先，我想承认我不喜欢material-ui，因此不建议那些考虑用它开始项目的人。背后的原因是你牺牲了太多的时间来定制组件以满足你的需求 - 这个解决方案与React的想法相反。它还使用您必须在组件文件中覆盖的内联样式，而不是scss或更少。这很糟糕。我甚至没有提到使用JS处理的所有UI交互操作，这些操作可能会让您的表现感到疼痛。

另一个简短的提及是react-router。不幸的是，我也不是它的粉丝。伙计们，why do you change the API in every next release？ Why is it so damn difficult to just reset the location queries？只需查看FlowRouter，看看应该如何实现路由API。

无论如何，我的解决方案是在<Link />组件周围实现一个包装器，并将<IconMenu />移到<Link />包装器之外：

<li key={i}>
  <ListItem
          key={i}
          containerElement={<Link to={`/items/${item.id}`} />}
  />
  {iconMenu}
</li>

React Router Link中的Material-UI组件触发链接

2 个答案: