如何解决我如何在React js中的材料UI选择选项中访问自定义目标属性
这是我的选择元素
<Select
native
onChange={this.handleDepChange}
>
{
departments.map((dep,index) => (
<option key={'dep-ind - ' + index} value={dep.id} depCode={dep.code}>
{dep.name}
</option>
))
}
</Select>
我在 option元素中定义了名为 depCode
的自定义属性。
这是我的onChange
活动
handleDepChange = (e) => {
console.log(e.target.value) //it give the intended value
console.log(e.target.depCode) //it is undefined
}
有人可以指导我如何访问 depCode
。
我正在使用MaterialUI库。
解决方法
尝试一下
e.nativeEvent.target.getAttribute("depcode")
实时演示
,自定义属性应始终以data-
开头。
例如,在您的情况下:data-depcode
:
<option key={'dep-ind - ' + index} value={dep.id} data-depcode={dep.code}>
然后您可以像这样访问它:
handleDepChange = (e) => {
const depvalue = e.target.dataset.depcode;
console.log(depvalue);
}
更多信息和示例:https://www.pluralsight.com/guides/how-to-access-custom-attributes-from-aevent-object-in-react
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。