Question

我的列表中有很长的对象列表，例如7000左右。一旦用户选择了选项值，我就会使用getOptionValue函数来获取选项值。它可以工作，但是由于选项列表太长而导致违规。

[违规]长时间运行的JavaScript任务花费了”

对于一长串的选择选项，是否有办法可以消除此错误？

const getOptionValue= (props) => (e) => {
    let options = e.target.options;
    let value = '';
    for (let i = 0, l = options.length; i < l; i++) {
        if (options[i].selected) {
            value = options[i].value;
        }
    }
    props.setOptionValue(value)
};

const AdminEdmForm = (props) => {
    return (
        <select multiple onChange={getOptionValue(props)}>
            {props.List.map((item, index) => {
                return <option key={index} value={item.id}> 
                       {item.id}</option>
            })}
        </select>
    )
};

Answer 1

使用web workers并将从长列表中查找匹配对象的任务委派给网络工作者

Answer 2

要@“一旦用户选择就获得选项值”，您可以为每个onClick绑定一个option事件处理程序：

const getOptionValue = (props) => (e) => {
    const el = e.target
    el.selected && props.setOptionValue(el.value)
}

const AdminEdmForm = (props) => {
    const handleOptionClick = getOptionValue(props)

    return (
        <select multiple>
            {props.List.map((item, index) => (
                <option key={index} value={item.id} onClick={handleOptionClick}> 
                    {item.id}
                </option> 
            ))}
        </select>
    )
};

此外，您的代码不能满足@“用户选择后立即获取选项值”的意图。

如何从长选择选项列表中拉出所选值？

2 个答案: