如何在反应钩子中获取自定义属性的值？答案

【问题标题】：How to get the value of custom atttributes in react hooks?如何在反应钩子中获取自定义属性的值？
【发布时间】：2021-08-25 16:00:43
【问题描述】：

如何使用 react hooks 获取自定义属性的值？

这里是代码沙箱中的示例代码：demo live

代码

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [value, setValue] = useState("");

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <select
        onChange={(e) => {
          console.log("value", e.target.value);
          console.log("description", e.target.description);
          setValue(e.target.value);
        }}
        name="cars"
        id="cars"
      >
        <option value="volvo" description="hahahahaa">
          Volvo
        </option>
        <option value="saab" description="hehehehehe">
          Saab
        </option>
        <option value="opel" description="hoooooooo">
          Opel
        </option>
        <option value="audi" description="huuuuuuuuuu">
          Audi
        </option>
      </select>
    </div>
  );
}

我能够获取属性值的值，但不能获取自定义描述。我得到未定义的console.log("description", e.target.description);

这里有什么问题？

【问题讨论】：

标签： reactjs select react-hooks custom-attributes

【解决方案1】：

e.target 给你select标签，你可以得到option标签和这样的描述：

console.log("description", e.target.childNodes[e.target.selectedIndex].getAttribute("description"));

【讨论】：

哇这个非常简单的解决方案没有复杂性thx

【解决方案2】：

在您的示例中，target 是<select>，您需要遍历所选选项并获取属性值。

当您可以使用带有值作为键的哈希图时，将数据存储在自定义选项属性中似乎并不实际

const Example = () => {
  const [desc, setDesc] = React.useState('')
  
  const descriptions = {
     volvo:'hahahahaa', 
      saab:'hehehehehe',
      opel:'hoooooooo'
  }
  
  const handleChange = (e)=>{
    const val =  e.target.value,
          des = descriptions[val]
     console.clear()
     console.log("value",val);
     console.log("description", des);
     setDesc(des)
  }

  return (
    <div>
    <div>Description: {desc}</div>
      <select
    onChange={handleChange}
    name="cars"
    id="cars"
  >
    <option value="volvo">
      Volvo
    </option>
    <option value="saab">
      Saab
    </option>
    <option value="opel" >
      Opel
    </option>  
  </select>
  
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：