如何将 onchange 与自动完成材料 ui 一起使用？

使用handleChange 方法处理带有Hooks 样式的表单输入的OnChange 事件，该事件设置对象的状态。

handleChange 函数依次调用 setLocation，后者用新值更新位置状态。

为了使用户数据输入更容易，我决定将城市字段更改为自动完成，但我未能捕获自动完成的值。 在文档中，他告诉我，我需要传递两个参数，但我不太明白

function(event: object, value: any) => void
event: The event source of the callback
value: null

如何访问该字段的值并将其放入我的函数中以插入数据？

        <Autocomplete
        style={{ width: 300 }}
        value={location.City}
        onChange={handleChange}
        options={list.City}
        classes={{
          option: classes.option,
        }}
        autoHighlight
        getOptionLabel={option => typeof option === 'string' ? option : option.City}
        renderOption={option => (
          <React.Fragment>

            {option.City} -{option.State}
          </React.Fragment>
        )}

         renderInput={params => (
           <TextField {...params} label="City"  value={location.City}  margin="normal" variant="outlined" style={{ width: 220 }} inputProps={{
             ...params.inputProps,
             autoComplete: 'disabled', // disable autocomplete and autofill
           }}/>
         )}
       />

如果您只是想在用户键入时获取输入的值，则需要使用onInputChange. The onChange当用户从下拉列表中选择一个选项时，处理程序就会运行。

export default function ComboBox() {
  function handleInputChange(event, value) {
    console.log(value);
  }

  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option: FilmOptionType) => option.title}
      style={{ width: 300 }}
      onInputChange={handleInputChange}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />
  );
}

代码沙箱 https://codesandbox.io/s/material-demo-4ogyp