React Material UI OutlinedInput 不显示错误消息

Question

我使用 React 和 Material UI 来显示概述的输入。error我可以让它显示道具设置有错误，但是当我尝试添加我的消息作为道具true时出现问题：helperText

<OutlinedInput
  margin="dense"
  value=""
  placeholder="my placeholder"
  error
  helperText="There has been an error" // Property 'helperText' does not exist on type 'IntrinsicAttributes & OutlinedInputProps'
/>

有什么方法可以同时使用OutlinedInput并显示错误帮助消息吗？

Answer 1

您可以使用FormHelperText来自 的组件@material-ui/core。

const [accountId, setAccountId] = useState({ value: "", error: "" });

<FormControl variant="outlined">
  <InputLabel htmlFor="accountId">Account Id</InputLabel>
  <OutlinedInput
    value={accountId.value}
    onChange={(e) => setAccountId({value: e.target.value, error:""})}
    inputProps={{
      "aria-label": "Account Id",
    }}
    labelWidth={74}
    error={!!accountId.error}
  />
  {!!accountId.error && (
    <FormHelperText error id="accountId-error">
      {accountId.error}
    </FormHelperText>
  )}
</FormControl>

Answer 2

您正在使用 TextField 内部使用的基本输入组件。如果您有一些特殊要求，您可以编写自己的文本字段，如下所示。TextField否则与variant="outlined"一起使用：

       <TextField
          margin="dense"
          value=""
          placeholder="my placeholder"
          error
          helperText="There has been an error"
          variant="outlined"
        />