从Form.Control中的数据列表中获取键

Question

我从API获得一个json，其中包含每个工作人员的列表:

const MOCK_STAFF = [{
id: 1,
name: "Jhon Doe",
department: "HR"
}, {
id: 2,
name: "Jane Doe",
department: "Research"
}, etc

然后它们被映射到一个数据表<option>中，在一个表单中。控制组件:

<Form.Group className="mb-3">
<Form.Label>Name</Form.Label>    
<Form.Control
name='staffName'
value={0}
list="namesList"
onChange={(e) => onChangeHandler(e)}/>
<Form.Label>Department</Form.Label>
<Form.Control disabled
name=department
value={}    
/>   

<datalist id="namesList">
{MOCK_DATA.map( (data) => (
<option key={data.id} value={data.department}>{data.name}</option>
))}
</datalist>
</Form.Group>

沙箱链接:https://codesandbox.io/s/modal-t59e7z?file=/src/App.tsx

我希望onChange={(e) => onChangeHandler(e)}在表单提交时获得<option key={data.id}的数据值，并使部门Form.Control引用数据表中<option value={data.department}的值。'key' id不能显示给用户，它被用作数据库的主键。

I have try:

function onChangeHandler(e:React.SyntheticEvent) {

console.log(e.target.key);
}

but属性键在event.target"上不存在。我也不能用document.getElementById();和react。我怎么能得到值'键'，'值'和/或'默认值'从表单。用数据主义者控制?

谢谢

Answer 1

我不能在data-list上做到这一点，但在react-select上做到了:

type StaffOption = {
label: string, value: number
}
const MOCK_DATA= [{
id: 1,
name: "Jhon Doe",
department: "HR"
}, {
id: 2,
name: "Jane Doe",
department: "Research"
}, {
id: 3,
name: "Elizabeth meyer",
department: "Operations"
}]
type NameOption = {value: number, label: string, department: string}
type NameOptions = Array<NameOption>
function AddNewRowModal(props:AddNewRowProps) {
const [selectedStaffID, setSelectedStaffID] = useState(0);
function onChangeHandler(option: OnChangeValue<StaffOption, false>, 
actionMeta: ActionMeta<StaffOption>) {
console.log(option);  //this returns all 3 values defined on type StaffOption
if (option?.value !== undefined) {
setSelectedStaffID(option.value!);
}  
}
function BuildOptions (data:any[]) {
var options:NameOptions = []
data.forEach(element => {
options.push({
value: element.id!,
label: (element.name),
department: element.department});
});
return options;
var nameOptions = BuildOptions(MOCK_DATA);
return (
<Modal
show={props.showModal}
backdrop="static"
keyboard={false}
onHide={() => props.closeModal()} >
<Modal.Header closeButton>
<Modal.Title>Add new Entry</Modal.Title>
</Modal.Header>
<Modal.Body>
<Select 
options={nameOptions}
onChange={onChangeHandler} />
</Modal.Body>
<ModalFooter>
<Button variant='primary'>Create Entry</Button>
<Button variant='danger' onClick={() => props.closeModal()}>Cancel</Button>
</ModalFooter>
</Modal>
);
}

和codesandbox