我如何在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