reactjs - 在 Chip 中读取文本

Question

我有一个 Material UI 芯片，当我点击该芯片时，我想阅读其中的文本。到目前为止，我的代码如下:

<Chip
  label={name1}
  color="primary"
  variant="outlined"
  onMouseOver={(event) =>
    board.current.addMarker('e4', {
      class: 'emphasize',
      slice: 'marker3',
    })
  }
  onMouseLeave={(event) => board.current.removeMarkers(undefined, undefined)}
  onClick={(event) => alert(event.target.value)}
/>

我的 onClick 事件没有获取筹码值。我哪里错了？

Answer 1

您可以简单地将 name1 添加到该点击事件，您将获得值:

<Chip
  label={name1}
  color="primary"
  variant="outlined"
  onMouseOver={(event) =>
    board.current.addMarker('e4', {
      class: 'emphasize',
      slice: 'marker3',
    })
  }
  onMouseLeave={(event) => board.current.removeMarkers(undefined, undefined)}
  onClick={(event) => alert(name1)} // <-------- Add name here
/>

我猜你正在遍历某个数组并打印出这些 Chips。因此，只需将该值添加到该传递或单个组件声明中的 alert。