能否修改e.target.value的值？员工搜索组件技术问询

核心问题：能否修改e.target.value为员工工号？ #

可行，但更稳妥的方式是构造一个包含工号的合成事件对象传给onChange，而非直接修改原事件的target.value（原生DOM事件的target属性可能存在只读限制，直接修改可能引发意外副作用）。

现有代码的关键问题 #

你当前用map遍历所有员工并反复调用setEmpBadge，最终empBadge只会是最后一个员工的工号，完全无法匹配用户选中的那一位，这是逻辑错误。

修正后的代码示例 #

const [empBadge, setEmpBadge] = useState(null);

const onBadgeChange = (e) => {
    e.preventDefault();
    // 根据选中的员工姓名（从e.target.textContent获取）找到对应的员工对象
    const selectedEmployee = employees.employees?.find(emp => emp.Name === e.target.textContent);
    
    if (selectedEmployee) {
        const targetBadge = selectedEmployee.Badge;
        setEmpBadge(targetBadge);
        // 构造合成事件，替换value为员工工号
        const syntheticEvent = {
            ...e,
            target: {
                ...e.target,
                value: targetBadge
            }
        };
        // 传入修改后的事件给onChange
        onChange(syntheticEvent);
    }
};

代码说明 #

1. 用find替代map：精准定位用户选中的员工（通过姓名匹配），而非遍历所有员工。
2. 合成事件对象：复制原事件的所有属性，仅替换target.value为员工工号，确保onChange能拿到有效数据。
3. 空值判断：避免employees.employees为空或找不到匹配员工时出现报错。

内容的提问来源于stack exchange，提问作者Ciaran Crowley