Как в React достучаться к дата атрибутам?

Question

[Владимир]

Пытаюсь привязать дата атрибуты к кастомному компоненту, нее пробрасывая их внутрь этого компонента
https://stackblitz.com/edit/react-qrts92?file=index.js получаю пустой массив в onChange
Если вместо кастомного MyInput поставить обычный input - все работает
Можно ли как то привязать свои атрибуты к компоненту, чтобы достучаться до них через event.target ?

Делаю это чтобы избежать вот таких ивент хендлеров
https://stackblitz.com/edit/react-khcwbu?file=index.js

Answer 1

[Антон Спирин]

const MyInput = props => {
  const { onChange } = this.props;
  const id = this.props['data-id'];
  const name = this.props['data-name'];
  
  return <input onChange={onChange} data-id={id} data-name={name} />;
};

либо:

const MyInput = ({ onChange, ...rest }) => <input onChange={onChange} {...rest} />;

В хандлере:

onChange = e => {
  const { id, name } = e.target.dataset;
  // do something with id and name
}

Comments

[Владимир]

Работает только с простым input но не с кастомныйм компонентом
https://stackblitz.com/edit/react-2xzkws?file=index.js

[Антон Спирин]

Владимир, надо добавить передачу остальных параметров. Обновил ответ.

[Антон Спирин]

Владимир, можно еще дата атрибуты поименно передавать:

const MyInput = props => {
  const { onChange } = this.props;
  const id = this.props['data-id'];
  const name = this.props['data-name'];
  
  return <input onChange={onChange} data-id={id} data-name={name} />;
};