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

Question

我正在使用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 选择选项后您可以在其中看到问题。

任何想法都将非常感激。

谢谢

Answer 1

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

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

{ value: 3, name: undefined }

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

---

可能的解决方案

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

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

---

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

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

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