react-hook-form和material-ui FormControl [英] react-hook-form and material-ui FormControl

问题描述

因此，我正在尝试为表单注册一些单选按钮，但是不会注册.

 < FormControl component ="fieldset"inputRef = {register({required:true})}>< FormLabel组件=传奇"></FormLabel>< RadioGroup aria-label =促进"；name =促进"value = {promoting} onChange = {handleChange} inputRef = {register({required:true})}>< FormControlLabel value =业务"；控件= {< Radio/>}标签=业务"/>< FormControlLabel value =非营利"控件= {< Radio/>}标签=非营利"/>< FormControlLabel value =事件"；控件= {< Radio/>}标签=事件"；/></RadioGroup></FormControl> 

我想知道我做错了什么

完整代码

 导出默认功能BuildAd(){const [promoting，setValue] = React.useState('female');const handleChange =(事件)=>{setValue(event.target.value);};const {register，handleSubmit，errors} = useForm();const onSubmit =数据=>console.log(data);console.log(错误);返回 (< div style = {{padding:16，margin:'auto'，maxWidth:600}}>< CssBaseline/><版式变体＝"h5".align ＝中心".component ="h2"gutterBottom>建立广告活动</Typography>< Paper style = {{padding:16}}>< form onSubmit = {handleSubmit(onSubmit)}><输入类型=文本"；占位符=名字"name =名字"ref = {register({required:true，maxLength:80})}/><输入类型=文本"；占位符=姓氏"name =姓氏"ref = {register({required:true，maxLength:100})}/><输入类型=文本"；占位符=电子邮件"name =电子邮件"ref = {register({required:true，pattern:/^ \ S + @ \ S + $/i})}/>< input type ="tel"占位符=手机号码"name =手机号码"ref = {register({required:true，minLength:6，maxLength:12})}/><选择名称=标题"；ref = {register({required:true})}>< option value ="Mr"> Mr</option>< option value ="Mrs"> Mrs</option>< option value ="Miss"> Miss</option>< option value ="Dr"> Dr</option></选择><输入名称=开发人员"type ="radio"value =是"ref = {register({required:true})}/><输入名称=开发人员"type ="radio"value =否"ref = {register({required:true})}/><版式变体="h5">您在做什么广告</版式><框m = {2}/>< FormControl component ="fieldset"inputRef = {register({required:true})}>< FormLabel组件=传奇"></FormLabel>< RadioGroup aria-label =促进"；name =促进"value = {promoting} onChange = {handleChange} inputRef = {register({required:true})}>< FormControlLabel value =业务"；控件= {<无线电输入Ref = {寄存器({必填:true})}/>}标签=业务"/>< FormControlLabel value =非营利"控件= {<无线电输入Ref = {寄存器({必选:true})}/>}标签=非盈利"；/>< FormControlLabel value =事件"；control = {<无线电输入Ref = {寄存器({必需:true})}/>} label =事件"；/></RadioGroup></FormControl><输入类型=提交"；/></form></Paper></div>);} 

解决方案

您可以使用

So I am trying to register some radio buttons for my form, however it will not register.

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

I am wondering what I am doing wrong

Full code

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>
  );
}

解决方案

You can fallback on controllable components by using Controller if it doesn't work.

In your case, I suspect it's because the name props passed to your <RadioGroup /> is not the same as the name attribute when passed into native input like <input /> or <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>

If you want to read the value when onChange fires, you cannot do that when passing the element to the as props:

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

The reason is because Controller will copy the element that you pass in and pass its own onChange props that will override yours. See here and here.

To fix that problem, you need to use another way to pass the element down by using render props to gain more control on how you should render your components.

<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>
  )}
/>

Live Demo

这篇关于react-hook-form和material-ui FormControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！