форма-крючок-реакция и пользовательский интерфейс материала FormControl

Итак, я пытаюсь зарегистрировать некоторые переключатели для своей формы, но она не регистрируется.

<FormControl component="fieldset" inputRef={register({ required: true })}>
  <FormLabel component="legend">Promoting</FormLabel>
  <RadioGroup aria-label="promoting" name="promoting" value={promoting} onChange={handleChange} inputRef={register({ required: true })}>
    <FormControlLabel value="business" control={<Radio  />} label="Business" />
    <FormControlLabel value="nonprofit" control={<Radio />} label="Non-Profit" />
    <FormControlLabel value="event" control={<Radio  />} label="Event" />
  </RadioGroup>
</FormControl>

Мне интересно, что я делаю не так

Полный код

export default function BuildAd() {
  const [promoting, setValue] = React.useState('female');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const { register, handleSubmit, errors } = useForm();

  const onSubmit = data => console.log(data);
  console.log(errors);
  
  return (
    <div style={{ padding: 16, margin: 'auto', maxWidth: 600 }}>
    <CssBaseline />
    
    <Typography variant="h5" align="center" component="h2" gutterBottom>
      Create your campaign
    </Typography>
         <Paper style={{ padding: 16 }}>
              <form onSubmit={handleSubmit(onSubmit)}>
                <input type="text" placeholder="First name" name="First name" ref={register({required: true, maxLength: 80})} />
                <input type="text" placeholder="Last name" name="Last name" ref={register({required: true, maxLength: 100})} />
                <input type="text" placeholder="Email" name="Email" ref={register({required: true, pattern: /^\S+@\S+$/i})} />
                <input type="tel" placeholder="Mobile number" name="Mobile number" ref={register({required: true, minLength: 6, maxLength: 12})} />
                <select name="Title" ref={register({ required: true })}>
                  <option value="Mr">Mr</option>
                  <option value="Mrs">Mrs</option>
                  <option value="Miss">Miss</option>
                  <option value="Dr">Dr</option>
                </select>

                <input name="Developer" type="radio" value="Yes" ref={register({ required: true })}/>
                <input name="Developer" type="radio" value="No" ref={register({ required: true })}/>


                <Typography variant="h5">What are you Advertising</Typography>
                    <Box m={2}/>
                    <FormControl component="fieldset" inputRef={register({ required: true })}>
                    <FormLabel component="legend">Promoting</FormLabel>
                    <RadioGroup aria-label="promoting" name="promoting" value={promoting} onChange={handleChange} inputRef={register({ required: true })}>
                      <FormControlLabel value="business" control={<Radio inputRef={register({ required: true })} />} label="Business" />
                      <FormControlLabel value="nonprofit" control={<Radio inputRef={register({ required: true })} />} label="Non-Profit" />
                      <FormControlLabel value="event" control={<Radio inputRef={register({ required: true })} />} label="Event" />
                    </RadioGroup>
                  </FormControl>
                  
                <input type="submit" />
            </form>
      </Paper>
    </div>
  );
}

reactjs material-ui react-hook-form
person RussellHarrower    schedule 24.09.2020    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вы можете вернуться к управляемым компонентам, используя Controller, если это не сработает.

В вашем случае я подозреваю, что это потому, что name props переданы в ваш <RadioGroup /> - это не то же самое, что и атрибут name при передаче в собственный ввод, например <input /> или <select />.

const { register, handleSubmit, errors, control } = useForm();
const onSubmit = (data) => alert(JSON.stringify(data, null, 2));

<form onSubmit={handleSubmit(onSubmit)}>
  <FormControl component="fieldset">
    <FormLabel component="legend">Promoting</FormLabel>
    <Controller
      rules={{ required: true }}
      control={control}
      defaultValue="business"
      name="promoting"
      as={
        <RadioGroup>
          <FormControlLabel
            value="business"
            control={<Radio />}
            label="Business"
          />
          <FormControlLabel
            value="nonprofit"
            control={<Radio />}
            label="Non-Profit"
          />
          <FormControlLabel
            value="event"
            control={<Radio />}
            label="Event"
          />
        </RadioGroup>
      }
    />
  </FormControl>

  <input type="submit" />
</form>

Если вы хотите прочитать значение при срабатывании onChange, вы не можете этого сделать при передаче элемента в свойства as:

<Controller
  {...}
  as={
    <MyComponent
      onChange={handleChange} // handleChange will never be called
    />
  }
/>

Причина в том, что Controller скопирует переданный вами элемент и передаст свои собственные onChange реквизиты, которые переопределят ваши. См. здесь a> и здесь а>.

Чтобы решить эту проблему, вам нужно использовать другой способ передачи элемента, используя render props, чтобы получить больший контроль над тем, как вы должны визуализировать свои компоненты.

<Controller
  rules={{ required: true }}
  control={control}
  defaultValue="business"
  name="promoting2"
  render={({ name, onBlur, onChange, value }) => (
    <RadioGroup
      value={value}
      onBlur={onBlur}
      onChange={(e) => {
        onChange(e);
        console.log(e.target.value); // will be called this time
      }}
    >
      <FormControlLabel
        value="business"
        control={<Radio />}
        label="Business"
      />
      {...}
    </RadioGroup>
  )}
/>

Живая демонстрация

Изменить 64042394 / react-hook-form-and-material-ui-formcontrol

person NearHuscarl    schedule 24.09.2020
comment
В Live Demo и в приведенном выше коде обработчик onChange handleChange не вызывается. Если вы попробуете console.log в onChange или закомментируете вызов setValue в своей живой демонстрации, он будет работать точно так же. Вы знаете, что это происходит? Спасибо - person Greg Sadetsky; 11.03.2021
comment
@GregSadetsky Я обновил ответ и живую демонстрацию относительно вашей проблемы. - person NearHuscarl; 12.03.2021
comment
Спасибо, @NearHuscarl! Использование реквизита render хорошо работает. Ваше здоровье - person Greg Sadetsky; 13.03.2021