javascript - React Material UI OutlinedInput visar inte felmeddelande

Jag använder React och Material UI för att visa ett inramat inputfält. Jag kan få det att visa att det har uppstått ett fel med error-attributet inställt på true, men det uppstår ett problem när jag försöker lägga till helperText och mitt meddelande som ett attribut:

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

Finns det något sätt att använda både ett OutlinedInput och visa ett felmeddelande som hjälptext?

Svar #1

Du kan använda FormHelperText-komponenten från @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>

Svar #2

Du använder basinmatningskomponenten som används av TextField internt. Om du har något speciellt krav kan du komponera din egen textfält som visas här. Annars använd TextField med variant="outlined":

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

Relaterade artiklar