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

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

如何使用 React 钩子获取自定义属性的值？

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);

这里出了什么问题？

解决方法

在您的示例中，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>

e.target 给你选择标签，你可以得到选项标签和这样的描述：

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