如何在Material Design React中使用数据属性? [英] How to use data attributes with Material Design React?

问题描述

我最近开始使用Material Design React，但我刚发现data-someField确实会将值传播到数据集映射.

I recently started using Material Design React, but I have just come across that data-someField does propagate the value to the dataset map.

示例:

<Input data-role=‘someValue’  onChange={this.onChange} />

onChange = e =>{
           const role = e.target.dataset.role
            const role2 = e.currentTarget.dataset.role
}

onChange 处理程序中的两个角色都未定义.如果我将Input标签更改为常规html输入，则不会发生这种情况.

Both roles in the onChange handler are undefined. This doesn’t happen if I change the Input tag to a regular html input.

有什么想法为什么Material Design不允许数据属性或是否有任何变通办法?

Any ideas why Material Design doesn’t allow data attributes or if there is any workarounds?

提前谢谢！

---在@Springer建议之后，我尝试使用inputprops，但注意到只有name属性可用，其余的未定义.

--- 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}
                  /> ```

推荐答案

在react material api中，他们使用 inputProps 传递Extrat对象(props，data ..)

In the react material api they use the inputProps to pass extrat object (props , data..)

请参见文档

inputProps:应用于输入元素的属性.

inputProps : Attributes applied to the input element.

通过示例添加角色数据属性，您应该将data-role选项('data-role':'roleAttrib')作为输入添加到您的 inputProps 道具中应该看起来像:

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
            ... 
         }} />

这篇关于如何在Material Design React中使用数据属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！