如何在Material UI AutoComplete中设置值和选项，并在onChange时赋值给对象

问题修改方案 #

你当前代码的核心问题是用错了AutoComplete的监听事件，同时选项匹配逻辑有误，按下面的方案调整即可实现需求： #

调整说明

1. Material UI的AutoComplete组件中，onInputChange是监听输入框文本输入的事件，选项选中时触发的是onChange事件，该回调的第二个参数就是当前选中的完整分类对象
2. 原getOptionSelected的匹配逻辑错误，应该用分类id作为唯一匹配标识，避免分类名重复时出现匹配异常
3. 选中分类后直接取分类对象的id赋值给brand.cat_id即可

修改后完整代码

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

// 新增分类选中处理逻辑
const handleCategoryChange = (_, selectedOption) => {
  setBrand({
    ...brand,
    // 选中时取分类id赋值，清空选中时设为null/空值，可按需调整
    cat_id: selectedOption ? selectedOption.id : null
  })
}

<Autocomplete
  // 修正选项匹配逻辑，用id作为唯一判断标准
  getOptionSelected={(option, value) => option.id === value.id}
  getOptionLabel={(option) => option.category_name}
  options={categories}
  // 替换为选中事件监听
  onChange={handleCategoryChange}
  loading={loading}
  renderInput={(params) => (
    <TextField
      {...params}
      // name属性放到TextField上才会对原生输入事件生效
      name="cat_id"
      label="Category"
      fullWidth
      variant="outlined"
      required
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <Fragment>
            {" "}
            {loading ? <CircularProgress color="inherit" /> : null}{" "}
            {params.InputProps.endAdornment}
          </Fragment>
        ),
      }}
    />
  )}
/>;

内容的提问来源于stack exchange，提问作者Md. Joynal Alam