反应：从数据列表选项onchange获取数据属性

Question

好，这里没有现有的解决方案，所以...

如何从React的数据列表中获取数据属性（无选择项？）>

Render JSX

<input list="list-id" id="input-id" multiple onChange={handleInputChange} />
<datalist id="list-id">
    {
        options.map((item, key) => {
            return <option key={key} data-foo={item.id} value={item.value}>{item.name}</option>;
        })
    }
</datalist>
事件处理程序

function handleInputChange(e) {
    console.dir(e.target.dataset)                    // Empty DOMStringMap
    console.dir(e.target.getAttribute('data-foo'))   // null
    console.dir(e.target.attributes)                 // NamedNodeMap with no option
    console.dir(e.target.options)                    // undefined
}
我已经在其他Vanilla JS案例中设法获得了这样的价值...

let inputValue = document.getElementById("input-id").value;
let option = document.querySelector(`option[value="${inputValue}"]`).getAttribute('data-foo');
在React中将这样使用...

function getDatalistSelectedOption(inputId, attribute) {
    let inputValue = document.getElementById(inputId).value;
    let option = document.querySelector(`option[value="${inputValue}"]`);
    let optionValue = option ? option.getAttribute(attribute) : "";
    return optionValue
}

// In the event handler
console.log(getDatalistSelectedOption("input-id", "data-foo")) // returns the proper data value
但是在React中似乎不是正确的方法。

好吧，这里的现有解决方案都不起作用，所以...如何从React的数据列表中获取数据属性（从选择中否）？渲染JSX

Answer 1

我永远不会自己使用它，因为有更好的在线软件包（react-select）。但是，如果要使用数据列表，则可以像这样获得所选值的数据属性：