React/Typescript-如何在单个onChange处理程序函数中处理不同的事件类型

Question

我有一个表单，它由不同类型的输入组成，使用mui库。我想获取不同类型的输入组件的值，并将它们存储在Grandparent组件的单个状态中。如果不同类型的输入具有相同的Event函数结构(即(e: React.ChangeEvent<HTMLInputElement>) => void(，我可以处理它们，但我现在使用的是AutoComplete组件，由于它有不同的onChange事件处理程序，我不确定如何在单个onChange处理程序中处理它的更改。

请查看这个代码沙盒链接，了解问题的大致结构。我希望在valueStates.ts(在Grandparent.tsx中调用(中的getNameAndValueFromEvent()方法中处理Child3的输入。

Answer 1

Autocomplete的onChange事件与TextField的onChange活动略有不同。因此，您无法通过单个值更改处理程序函数直接处理它们。

您可以在Child3组件中为Autocomplete添加一个新的值更改处理程序，以发送valueChange函数所需的参数。

您的Child3组件可以类似于：

const Child3: React.FC<Props> = ({ id, valueChange }) => {
const handleValueChange = (event: React.SyntheticEvent, val: string) => {
const dataToBeSent = {
target: {
name: id,
value: val
}
}
valueChange(dataToBeSent, id)
}
return (
<>
<Autocomplete
multiple
disableCloseOnSelect
id="tags-outlined"
options={options}
getOptionLabel={(option) => option.name}
filterSelectedOptions
onChange={handleValueChange}
renderInput={(params) => (
<TextField
{...params}
label="Child3"
placeholder="Option"
name={id}
/>
)}
/>
</>
)
}

你可以看看这个分叉的沙箱，看看这个方法的实际工作示例。