如何在反应中访问选项的自定义属性值
[英]How to access custom attribute value of option in react
问题描述
我想访问自定义选项属性值，但我失败了，我无法解决我的问题，有人可以帮助我实现我的目标吗？
代码
<option value="1" data-set="demo">Value 1</option>
我想在控制台中访问data-set值怎么可能请帮助我？
4 个解决方案
解决方案1
3 2020-02-21 19:14:02
如果您在选择上有一个handleChange事件，例如使用双向绑定，那么您可以像这样访问它：
handleChange = (e) => {
console.log( e.target.selectedOptions[0].getAttribute('data-set') );
}
在渲染中它可能看起来像：
<select value={this.state.value} onChange={this.handleChange}>
解决方案2
0 2020-02-21 19:07:54
const val = document.querySelector("option[value=\\"1\\"]").getAttribute('data-set') console.log(val)
<option value="1" data-set="demo">Value 1</option>
或者
const val = document.querySelector("option[value=\"1\"]").dataset.set
console.log(val)
解决方案3
0 已采纳 2020-02-21 21:35:21
如果您处理onChange(event) ，则所选选项（常规<select>单个选项）将作为数组嵌套在event对象中： event.target.selectedOptions 。
为了获取该节点的data-set属性，您只需使用Element.getAttribute()方法。
因此，通过一些解构，您的任务可能会如此简单地解决：
const { render } = ReactDOM const Select = () => { const onSelect = ({target:{selectedOptions:[option]}}) => console.log(option.getAttribute('data-set')) return ( <select onChange={onSelect}> <option selected disabled>Select...</option> <option value="1" data-set="demo1">Value 1</option> <option value="2" data-set="demo2">Value 2</option> <option value="3" data-set="demo3">Value 3</option> </select> ) } render ( <Select />, document.getElementById('root') )
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>
解决方案4
0 2023-01-25 18:09:05
如果您使用的是onChange处理程序 function。那么您可以轻松获取数据“格式”的值。 您只需要传递事件参数。 然后我们有一个数据集属性，使用它我们可以获得该标签中声明的所有数据“格式” 。 数据集返回包含自定义属性及其值的键值对 object。
const inputtag=document.getElementById("input_value") const handleChange=(e)=>{ const customAttributes=e.target.dataset /*customAttributes containes the attributes you defined, in key value pair*/ console.log(customAttributes) /* example customAttributes = { "input": "value1", "value": "value2" } */ } inputtag.addEventListener('change',handleChange,true)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id='input_value' data-input='value1' data-value='value2' type='text' placeholder='write here'/> </body> </html>
注意，我们也可以使用 onClick function 获取自定义属性数据，所有逻辑将保持原样。
在输入标签的情况下，我们可以更喜欢onChange而我们可以使用onClick用于其他标签。
React Hooks：如何访问自定义属性值？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.