Недавно я начал использовать Material Design React, но только что обнаружил, что data-someField действительно распространяет значение на карту набора данных.
Пример:
<Input data-role=‘someValue’ onChange = {this.onChange} />
onChange = e =>{
const role = e.target.dataset.role
const role2 = e.currentTarget.dataset.role
}
Обе роли в обработчике onChange не определены. Этого не произойдет, если я изменю тег ввода на обычный ввод html.
Есть идеи, почему Material Design не допускает атрибуты данных или есть какие-то обходные пути?
Заранее спасибо!
--- После предложения @Springer я попытался использовать inputprops, но заметил, что доступен только атрибут имени, остальные не определены.
``` <Input
value = {role.name}
disabled = {!this.state.editMode}
inputProps = {{
name: 'MyName',
role: 'MyRole',
dataset: {
degree: 'Teniente'
},
data: {
roleId: role.uuid
},
dataRoleId: {
roleId: role.uuid
}
}}
disableUnderline = {true}
data-role-id = {role.uuid}
role = {role}
onChange = {this.onChangeExistingRole}
/> ```
Причина, по которой ни одно из полей, кроме имени, не работало, заключалась в том, что это настраиваемые атрибуты, поэтому их нужно заключать в кавычки: inputProps = {{'data-role':'MyRole'}}. Тогда вы сможете получить к ним доступ в обработчике следующим образом: e.target.dataset.role



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


В API-интерфейсе реагирующего материала они используют inputProps для передачи дополнительных объектов (реквизиты, данные..)
см. документ
inputProps : Attributes applied to the input element.
например, чтобы добавить атрибут данных роли, вы должны добавить в свой inputProps реквизит параметры роли данных ( 'data-role':'roleAttrib'), ввод должен выглядеть так:
<Input value = {role.name}
disabled = {!this.state.editMode}
inputProps = {{
name: 'MyName',
'data-role':'role' // <------- add data attribute like this
...
}} />
Привет @Springer, спасибо за ваш ответ. Не могли бы вы привести пример того, как вы могли бы получить доступ к значениям? Я пробовал inputProps, но доступен только атрибут имени. Я отредактирую вопрос, чтобы показать, что я пробовал. Спасибо
Неважно, я разобрался. Спасибо, что указали мне правильное направление
Нам нужен пример.
@JamieHutber, ответ уже принят и кажется ясным! , кстати, я добавил пример для других людей для большего понимания
Как это сделать с помощью <Button>? :/
Как вы получаете доступ к inputProps из события, вызванного этим входом?
используйте inputProps, чтобы передать все, что вы хотите, на свой ввод