React Form.Control绑定datalist获取选中option隐藏值及关联字段方法

原生<datalist>绑定input触发change事件时，事件对象上只会返回输入框本身的输入值，不会携带选中option节点的自定义属性（包括你绑的key），所以直接读e.target.key必然报不存在的错误，这种场景完全不需要操作DOM，用React受控组件逻辑就能实现需求。

• 修正option绑定逻辑：你当前把option的value绑定为department，会导致用户选姓名时输入框显示部门，不符合交互预期。将value改为绑定员工姓名data.name，用户选中后输入框会正常显示姓名。
• 用组件state统一管理表单值：单独存储三个字段：用户输入/选中的员工姓名、对应隐藏的员工主键id、关联的部门值，不需要从DOM节点上读任何属性。
• 编写匹配逻辑：输入框值变化时，直接从你已经从接口获取、存在前端内存里的员工列表中，匹配姓名和当前输入值一致的条目，把对应id、department同步更新到state里即可。
• 表单提交时直接从state里取staffId作为数据库主键传给后端即可，禁用的部门输入框直接绑定state里的department值，会自动联动显示。

import { useState } from 'react';
import { Form } from 'react-bootstrap';

// 接口返回的员工列表，拉取后可存到组件state/全局状态中
const MOCK_STAFF = [
  { id: 1, name: "Jhon Doe", department: "HR" },
  { id: 2, name: "Jane Doe", department: "Research" }
];

export default function StaffSelectForm() {
  const [formState, setFormState] = useState({
    staffName: '',
    staffId: null as number | null, // 给后端传的隐藏主键
    department: ''
  });

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputVal = e.target.value.trim();
    // 直接从内存中的员工列表匹配，零DOM操作
    const targetStaff = MOCK_STAFF.find(item => item.name === inputVal);
    setFormState({
      staffName: inputVal,
      staffId: targetStaff?.id || null,
      department: targetStaff?.department || ''
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!formState.staffId) {
      alert('请从下拉列表选择有效员工');
      return;
    }
    // 提交参数直接取formState.staffId即可
    console.log('提交数据', formState);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group className="mb-3">
        <Form.Label>Name</Form.Label>    
        <Form.Control
          name='staffName'
          value={formState.staffName}
          list="namesList"
          onChange={handleNameChange}
        />
        <Form.Label>Department</Form.Label>
        <Form.Control 
          disabled
          name="department"
          value={formState.department}    
        />   
        <datalist id="namesList">
          {MOCK_STAFF.map((staff) => (
            <option 
              key={staff.id} 
              value={staff.name}
            />
          ))}
        </datalist>
        <button className="btn btn-primary mt-3" type="submit">提交</button>
      </Form.Group>
    </Form>
  );
}

• 如果业务场景存在同名员工，可以调整匹配逻辑：比如option的value临时拼接id，匹配完成后再把输入框显示值替换为纯姓名，避免匹配错误。
• 不推荐读取option上的data-*属性的方案：本质还是操作DOM，不符合React数据驱动的设计思路，而且你本身已经持有全量员工数据，内存匹配的性能远高于DOM查询。

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