在 react-datatable-component 中使用时，Material UI select throws event.target.getAttribute 不是函数

Posted 2023-02-22

【中文标题】在 react-datatable-component 中使用时，Material UI select throws event.target.getAttribute 不是函数

【英文标题】：Material UI select throws event.target.getAttribute is not a function when used from within react-datatable-component

【发布时间】：2020-12-14 06:33:15

【问题描述】：

我正在使用 react-datatable-component (https://www.npmjs.com/package/react-data-table-component) 并拥有自定义单元格，因为我希望某些字段可编辑。

但是，我在使用 Material UI 中的 Select 字段时遇到了一个问题，因为它在触发“onChange”事件时返回“event.target.value”不是一个函数。

我创建了以下沙箱 https://codesandbox.io/s/jolly-williams-3hiyj?file=/src/App.js:50-100 选择选项后您可以在哪里看到问题。

任何想法都将不胜感激。

谢谢

【参考方案1】：

您的问题似乎是由 react-data-table-component 的 TableRow.js 上的 line 引起的，当单击行时它会尝试执行 e.target.getAttribute('data-tag')。

但是，当您在 material-ui 的 FormControl 或 Select 组件和 console.log event.target 上附加 onClick 时，您会得到

 value: 3, name: undefined 

event.target 不是 html 元素，而只是具有 value 和 name 属性的 object。因此，当 react-data-table-component 执行 e.target.getAttribute('data-tag') 时，它会爆炸。

---

可能的解决方案

将onClick 处理程序附加到material-ui 的FormControl 或Select 并停止event 的传播

<FormControl onClick=(e) => e.stopPropagation() >
...

---

另请注意，执行（下面的代码）不会更改所选值。您必须为您的 Select 列创建一个组件并将所选值放入 state。我将这些修复添加到您可以在下面找到的代码框中。

...
onChange=(event) => 
  row.pressTypeCode = event.target.value;

PS：react-data-table-component 的列有ignoreRowClick，但我不确定为什么它不适用于我们的代码。

【讨论】：

另一个快速修复 - 将选择放在一个框中