javascript - 如何在 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 处理程序中的两个 Angular 色都未定义。如果我将 Input 标记更改为常规 html 输入，则不会发生这种情况。

为什么 Material Design 不允许数据属性或者是否有任何解决方法？有什么想法吗？

提前致谢!

--- @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

在 react Material api 中，他们使用 inputProps传递 extrat 对象( Prop ，数据..)

参见 doc

inputProps : Attributes applied to the input element.

通过示例添加 Angular 色数据属性，您应该添加到您的 inputProps支持数据 Angular 色选项('data-role':'roleAttrib')，输入应如下所示:

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

其他组件也一样 除了 <Button>你直接在组件中添加数据属性，比如

<Button  data-your-attrib="value" />