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）。但是，如果要使用数据列表，则可以像这样获得所选值的数据属性：

class UserRepository {

    private final MongoTemplate mongoTemplate;

    public User upser(final User) {
        final Query query buildQueryById(user);
        final Document document = documentFromEntity(entity, USER_COLLECTION_NAME);
        return mongoTemplate.findAndModify(
                query, 
                document,
                new FindAndModifyOptions().returnNew(false).upsert(true),
                User.class
       );
    }
}

反应：从datalist选项onchange

1 个答案: