How to use data attributes with Material Design React?

依然范特西╮ 提交于 2020-12-08 06:53:59

问题


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

Example:

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

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

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

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

Thank you in advance!

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

回答1:


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

see doc

inputProps : Attributes applied to the input element.

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


来源:https://stackoverflow.com/questions/54961076/how-to-use-data-attributes-with-material-design-react

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!