如何在 material UI 中设置值和选项 AutoComplete 和 onChange 将值分配给对象？

Question

我在页面加载类别上有一个带有字段 cat_id 的品牌对象加载到自动完成 select。现在我想将 category id 设置为自动完成中带有类别选项的值，并设置 cat_id 来自自动完成选项值 onChange.

const handleChange = (e) => {
  const { name, value } = e.target;
  setBrand({
    ...brand,
    [name]: value,
  });
};

<Autocomplete
  getOptionSelected={(option, value) => option.category_name === value.id}
  getOptionLabel={(option) => option.category_name}
  name="cat_id"
  onInputChange={handleChange}
  options={categories}
  loading={loading}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Category"
      fullWidth
      variant="outlined"
      required
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <Fragment>
            {" "}
            {loading ? <CircularProgress color="inherit" /> : null}{" "}
            {params.InputProps.endAdornment}
          </Fragment>
        ),
      }}
    />
  )}
/>;

Answer 1

稍等片刻后得到帮助。我设法解决了这个问题，但我不确定这是不是推荐的方法。我直接设置了字段值onChange，并没有使用handleChange函数

<Autocomplete
  getOptionSelected={(option, value) => option.category_name === value.id}
  getOptionLabel={(option) => option.category_name}
  name="cat_id"
  options={categories}
  loading={loading}
  onChange={(e,option) => setBrand({...brand,cat_id: option.id,})}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Category"
      fullWidth
      variant="outlined"
      required
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <Fragment>
            {" "}
            {loading ? <CircularProgress color="inherit" /> : null}{" "}
            {params.InputProps.endAdornment}
          </Fragment>
        ),
      }}
    />
  )}
/>;

如何在 material UI 中设置值和选项 AutoComplete 和 onChange 将值分配给对象？

How to set value and option in material UI AutoComplete and onChange assign the value to a object?

javascript

reactjs

select

autocomplete

material-ui