Материал <Select>helperText не работает с реактивной формой и - PullRequest
Новая
       25

Материал <Select>helperText не работает с реактивной формой и

0 голосов
/ 05 марта 2020

Я использую yup для отображения ошибки / вспомогательного текста, когда поле является обязательным. Он отлично работает для ввода текста, однако, когда я пытаюсь использовать select с сообщением об ошибке с yup, он не отображает мое собственное сообщение об ошибке и выводит его на консоль: 

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>
...