React：从 datalist 选项 onchange 获取数据属性

Question

好的，这里现有的解决方案都不起作用，所以......

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

渲染 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 中的正确方法。

Answer 1

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

function handleInputChange() {
    var inputValue = document.getElementById("input-id").value;
    var options = document.getElementById("list-id").childNodes;
    for (var i = 0; i < opts.length; i++) {
      if (options[i].value === inputValue) {

        // Send to DB - options[i].attributes.value

        console.log(options[i].attributes.value)
        break;
      }
    }
  }