React中event.target.value与(event, value)的差异及状态更新问题

核心差异原因 #

你遇到的问题本质是Material-UI的Autocomplete组件和原生input的onChange回调参数格式完全不同：

• 原生input的onChange仅接收1个参数：event，选中值需通过event.target.value获取
• Material-UI Autocomplete的onChange接收2个参数：第一个是event，第二个才是当前选中的选项值

两种写法的具体区别 #

1. 第一种写法（无效）

const handleSelectFileType = (event) => { setFileType(event.target.value) }

Autocomplete组件的event.target并非指向输入框的真实DOM元素，event.target.value也不是你选中的"image"/"text"这类选项值，因此拿到的是无效数据，无法触发fileType状态更新。

2. 第二种写法（有效）

const handleSelectFileType = (event, value) => { setFileType(value) }

这完全符合Material-UI Autocomplete组件的onChange回调规范，第二个参数value就是当前选中的选项值（对应你传入的files数组元素），能正确触发useState的更新逻辑。

结合自定义组件的优化建议 #

你的AutocompleteForm直接将props的onChange传递给了Material-UI的Autocomplete组件，所以必须遵循后者的参数格式。如果想让自定义组件更贴近原生input的用法，可以在组件内部做一层封装：

export default function AutocompleteForm(props) {
  const { label, array, onChange} = props
  return (
    <Autocomplete
      disablePortal
      options={array}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label={label} />}
      onChange={(event, value) => onChange(value)} // 仅将选中值传递给父组件
    />
  )
}

这样父组件的handleSelectFileType就可以简化为(value) => setFileType(value)，更符合你最初的预期。

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