Material UI中父组件向子组件传递onChange函数无效的解决方法

核心问题1：Autocomplete的onChange绑定位置错误 #

你把handleSubmit绑定在了内部的TextField组件上，但Material UI的Autocomplete组件本身才是负责处理选项选择事件的，TextField的onChange只处理输入框的文本输入变化，不是选项选择的回调。

核心问题2：父组件状态更新函数调用错误 #

父组件里定义的状态是const [value, setValue] = useState('')，但在handleSelect里写的是setLabel(newvalue)，这里应该调用setValue来更新状态。

修正后的子组件代码： #

export default function AutocompleteForm(props) {
  const { label, array, handleSubmit } = props
  
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={array}
      sx={{ width: 300 }}
      // 把handleSubmit绑定到Autocomplete的onChange上
      onChange={handleSubmit}
      renderInput={(params) => <TextField {...params} label={label} />}
    />
  )
}

修正后的父组件代码： #

const Form = () => {
    const [value, setValue] = useState('')
    const handleSelect = (event, newvalue) => {
        console.log(newvalue)
        // 调用正确的状态更新函数setValue
        setValue(newvalue)
      }
    const options = ['Option 1', 'Option 2', 'Option 3']
    
    return (
    <AutocompleteForm array={options} label="Pick an option" handleSubmit={handleSelect}/>)
}

这样修改后，选择选项时就能触发handleSelect函数，控制台会打印选中的值，同时状态也会正确更新。

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