Блог

Я использую компонент react-datatable (https://www.npmjs.com/package/react-data-table-component ) и имеет пользовательские ячейки, поскольку я хочу, чтобы некоторые поля были доступны для редактирования.

Однако я сталкиваюсь с проблемой при использовании поля выбора из пользовательского интерфейса материала, поскольку оно возвращает, что «event.target.value» не является функцией при запуске события «onChange».

Я создал следующую изолированную средуhttps://codesandbox.io/s/jolly-williams-3hiyj?file=/src/App.js:50-100 где вы можете увидеть проблему после выбора опции.

Любые идеи будут очень оценены.

Спасибо

Похоже, что ваша проблема вызвана этой строкой в react-data-table-component TableRow.js , которую она пытается выполнить e.target.getAttribute('data-tag') при нажатии на строку.

Но когда вы прикрепляете onClick к компоненту FormControl или Select material-ui и console.log the event.target вы получите

 { value: 3, name: undefined }
  

event.target Это не HTML-элемент, а просто object с атрибутами value и name . Таким образом, при выполнении компонента react-data-table e.target.getAttribute('data-tag') он взрывается.

Возможное решение

Прикрепите onClick обработчик к material-ui FormControl или Select и остановите event распространение

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

Также обратите внимание, что выполнение (приведенный ниже код) не изменит выбранное значение. Вы должны создать компонент для вашего столбца выбора и поместить выбранное значение в state . Я добавил эти исправления в codesandbox, который вы можете найти ниже.

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

PS: у react-data-table-component есть ignoreRowClick для столбцов, но я не уверен, почему это не работает для нашего кода.