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

IT技术 javascript reactjs material-ui material-components react-material
2021-05-03 14:18:01

我最近开始使用 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 输入,则不会发生这种情况。

任何想法为什么材料设计不允许数据属性或是否有任何解决方法?

先感谢您!

--- 在@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}
                  /> ```
1个回答

在react材料 api 中,他们使用inputProps传递 extrat 对象(props,数据..)

文档

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

通过示例添加角色数据属性,您应该将inputProps数据角色选项('data-role':'roleAttrib'添加到props中,输入应如下所示:

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