Question

当需要一个字段时，我正在使用yup显示错误/帮助程序文本。它非常适合文本输入，但是当我尝试使用带有yup错误消息的select时，它不会呈现我的自定义错误消息并将其打印到控制台：

Warning: React does not recognize the `helperText` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `helpertext` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by ForwardRef(InputBase))
in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(OutlinedInput))
in ForwardRef(OutlinedInput) (created by WithStyles(ForwardRef(OutlinedInput)))
in WithStyles(ForwardRef(OutlinedInput)) (created by ForwardRef(Select))
in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
in WithStyles(ForwardRef(Select)) (created by Employee)
in div (created by ForwardRef(FormControl))
in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
in WithStyles(ForwardRef(FormControl)) (created by Employee)
in div (created by Employee)
in form (created by ValidatorForm)
in ValidatorForm (created by Employee)
in div (created by ForwardRef(CardContent))
in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
in WithStyles(ForwardRef(CardContent)) (created by Employee)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
in WithStyles(ForwardRef(Card)) (created by Employee)
in Employee (created by Index)
in ThemeProvider (created by Index)
in div (created by Index)
in Index (created by Context.Consumer)
in Route (created by App)
in Switch (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App

正常工作：

  <ValidatorForm onSubmit={handleSubmit(onSubmit)}>
        <div className="inputContainer">
          <TextField
            inputRef={register}
            id="outlined-basic"
            name="firstName"
            className="inputField"
            variant="outlined"
            label="First Name"
            error={!!errors.firstName}
            helperText={errors.firstName ? errors.firstName.message : ""}
          />
        </div>

无法正常工作：

              <FormControl variant="outlined" className={classes.formControl}>
            <InputLabel ref={inputLabel} >
              Location
            </InputLabel>
            <Select
              inputRef={register}
              value={location}
              labelWidth={labelWidth}
              error={!!errors.location}
              helperText={errors.location ? errors.location.message : ""}
            >
              {items.map(item => (
                <MenuItem key={item.value} value={item.value}>
                  {item.label}
                </MenuItem>
              ))}
            </Select>
          </FormControl>

Answer 1

const Helper = ({ counter, maxLength, minLength, text }) => {
  const classes = useStyles()

  return (
    <div className={classes.helperText}>
      {text.length <= 0 ? (
        <div className={classes.adviceColor}>
          Write at least {minLength} characters.
        </div>
      ) : text.length < minLength ? (
        <div className={classes.adviceColor}>
          You have to write {minLength - counter} characters to send.
        </div>
      ) : text.length <= maxLength ? (
        <div
          className={
            text.length - minLength > maxLength / 2 - minLength
              ? classes.allowedHardColor
              : classes.allowedColor
          }
        >
          You can send or write {maxLength - counter} characters more.
        </div>
      ) : (
        <div className={classes.rejectColor}>
          Your description is too long to send by{' '}
          {Math.abs(maxLength - counter)} characters.
        </div>
      )}
    </div>
  )
}

Answer 2

import { InputLabel, FormHelperText, Select } from "@material-ui/core";
import { FormControl, MenuItem, Button } from "@material-ui/core";
import { useForm, Controller } from "react-hook-form";

function sample(props) {
  const { handleSubmit, errors, control, register } = useForm();
  const name = "fieldName";
  const [value, setValue] = useState(null);
  const handleChange = (selected) => {
    setValue(selected.target.value);
  };
  const onSubmit = (data) => {};
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FormControl variant="filled" error={Boolean(errors[name])}>
        <InputLabel id={`labelId`}>{label || ""}</InputLabel>
        <Controller
          as={
            <Select labelId={`labelId`} value={value} >
              {options.map((item) => (
                <MenuItem value={item.id} key={item.id}>
                  {item.name}
                </MenuItem>
              ))}
            </Select>
          }
          name={`${name}`}
          rules={{ required: "field is required" }}
          control={control}
          defaultValue={{value}}
          valueName={value}
          variant="filled"
          onChange={([selected]) => {
            handleChange(selected);
            return selected;
          }}
        />
        <FormHelperText>Field is required</FormHelperText>
      </FormControl>
      <Button variant="contained" color="primary" type="submit">
        submit
      </Button>
    </form>
  );
}

材质<Select> helperText不适用于react-hook-form和yup

2 个答案: