Material UI Autocomplete组件onChange事件无法触发求助

问题出在Material UI的Autocomplete组件的onChange回调签名和原生input不一致，你之前的onInputChange函数是基于原生input的事件逻辑写的，无法适配Autocomplete的参数传递规则。

核心原因 #

Autocomplete的onChange回调接收三个参数：(event, newValue, reason)，其中第二个参数newValue才是选中/输入的新值，而不是通过event.target.value获取。你之前只传了event给onInputChange，自然拿不到有效值来更新状态。

解决方案 #

根据你的场景（freeSolo模式，location是字符串类型），直接修改Autocomplete的onChange逻辑即可：

修改后的Autocomplete代码

<Autocomplete
  freeSolo
  name="location"
  value={location}
  // 直接在onChange里更新状态
  onChange={(event, newValue) => {
    setEvent(prevState => ({
      ...prevState,
      location: newValue || '' // 处理空值情况
    }))
  }}
  // 确保选项和状态值的匹配逻辑（字符串对比）
  isOptionEqualToValue={(option, value) => option === value}
  options={locations}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Location"
      variant="outlined"
      margin="normal"
      fullWidth
      sx={{ paddingBottom: "10px" }}
    />
  )}
/>

复用通用更新函数（可选）

如果想和其他input复用状态更新逻辑，可以封装一个通用的处理函数：

// 通用状态更新函数
const updateEventField = (fieldName, value) => {
  setEvent(prev => ({...prev, [fieldName]: value}))
}

// 普通input的onChange写法
<TextField
  name="eventName"
  value={eventName}
  onChange={(e) => updateEventField(e.target.name, e.target.value)}
  // ...其他属性
/>

// Autocomplete的onChange写法
<Autocomplete
  freeSolo
  name="location"
  value={location}
  onChange={(event, newValue) => updateEventField('location', newValue || '')}
  isOptionEqualToValue={(option, value) => option === value}
  options={locations}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Location"
      variant="outlined"
      margin="normal"
      fullWidth
      sx={{ paddingBottom: "10px" }}
    />
  )}
/>

额外注意事项 #

如果你的locations是对象数组（比如[{id:1, name:"北京"}, ...]），需要额外配置：

• getOptionLabel={(option) => option.name}：指定显示在输入框的文本
• 调整isOptionEqualToValue为对象属性对比，比如(option, value) => option.id === value.id
• 状态更新时根据需求存对象或对象属性值

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