问题
I recently started using Material Design React, but I have just come across that data-someField does propagate the value to the dataset map.
Example:
<Input data-role=‘someValue’ onChange={this.onChange} />
onChange = e =>{
const role = e.target.dataset.role
const role2 = e.currentTarget.dataset.role
}
Both roles in the onChange handler are undefined. This doesn’t happen if I change the Input tag to a regular html input.
Any ideas why Material Design doesn’t allow data attributes or if there is any workarounds?
Thank you in advance!
--- After @Springer suggestion, I tried using the inputprops, but noticed that only the name attribute is available, the rest are undefined.
``` <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}
/> ```
回答1:
In the react material api they use the inputProps
to pass extrat object (props , data..)
see doc
inputProps : Attributes applied to the input element.
by example to add role data attribute you should add to your inputProps
props the data-role options ( 'data-role':'roleAttrib'
), the input should looks like :
<Input value={role.name}
disabled={!this.state.editMode}
inputProps={{
name: 'MyName',
'data-role':'role' // <------- add data attribute like this
...
}} />
来源:https://stackoverflow.com/questions/54961076/how-to-use-data-attributes-with-material-design-react