如何显示自动完成错误答案

【问题标题】：How can I show autocomplete errors如何显示自动完成错误
【发布时间】：2020-11-26 10:36:06
【问题描述】：

我正在使用 React Hook 表单。

<Controller
  control={control}
  rules={{ required: "Required" }}
  error={errors.state ? true : false}
  helperText={errors.state && errors.state.message}
  name="state"
  as={
    <AutoComplete
      options={stateOptions}
      onChange={selectStateHandler}
      label="State"
      value={selectedState}
    />
  }
/>

帮助文本与TextField 一起使用，但不适用于Autocomplete。 TextField 错误时边框颜色变化，我希望与 Autocomplete 相同。

【问题讨论】：

标签： reactjs forms controller material-ui react-hook-form

【解决方案1】：

Autocomplete 使用 TextField 渲染输入，因此您只需对文本字段执行相同操作即可显示错误

<Autocomplete
  ...
  renderInput={(params) => (
    <TextField
      error={true}
      helperText="Example error"
      {...params}
      label="Combo box"
      variant="outlined"
    />
  ...
  )}
/>

下面是预览代码框

【讨论】：