时间戳

首页 > 解决方案 > 如何在 Material Design React 中使用数据属性？

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

问题描述

我最近开始使用 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 处理程序中的两个角色都未定义。如果我将 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}
                  /> ```

标签： javascriptreactjsmaterial-uimaterial-componentsreact-material

解决方案

在反应材料 api 中，他们使用inputProps传递提取对象（道具，数据..）

见文档

inputProps ：应用于输入元素的属性。

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

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

推荐阅读