如何在 Material Design React 中使用数据属性？

Question

我最近开始使用 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 设计不允许数据属性或者是否有任何解决方法？

提前致谢！

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

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

Answer 1

在反应中 material api 他们使用 inputProps 传递 extrat 对象（道具，数据..）

参见 doc

inputProps : Attributes applied to the input element.

通过示例添加角色数据属性，您应该将数据角色选项（'data-role':'roleAttrib'）添加到您的 inputProps 道具中，输入应如下所示：

<Input   value={role.name}
         disabled={!this.state.editMode}
         inputProps={{
            name: 'MyName',
            'data-role':'role' // <------- add data attribute like this
            ... 
         }} />

如何在 Material Design React 中使用数据属性？

How to use data attributes with Material Design React?

javascript

reactjs

material-ui

material-components

react-material