问如何使用带有单选按钮的react窗体控制器
EN

Stack Overflow用户

提问于 2022-08-21 18:42:24

回答 2查看 1.4K关注 0票数 0

问题：

控制器没有像我所期望的那样工作，我无法以react钩子的形式注册单选按钮。它显示为未定义。

我想做的是：

我有一个可重用的WrapperRadio组件，它设置Controller，然后呈现原子RadioButton组件。然后在RegistrationForm中使用RegistrationForm，并希望在单击GetValues或Submit按钮时能够在控制台中看到选定的单选按钮值。
最终目标是能够将原子RadioButton组件的数量/内容指定为WrapperRadio的子组件。这将允许我重复使用它，但在我继续前进之前，我尝试让Controller处理一个输入字段。

示例：

代码沙箱链接

码砂箱

在WrapperRadio中使用RegistrationForm

    <form onSubmit={onSubmit}>
      <WrapperRadio
        control={control}
        name="radioSelection"
        label="This is a label"
      />
    ...
    </form>

控制器在WrapperRadio中的应用

    return (
        <div>
          <Controller
            control={control}
            name={name}
            render={({ field }) => <RadioButton {...field} label={label} />}
          />
        </div>
      );

原子RadioButton元件

    return (
        <fieldset className="max-w-sm">
          <input
            ref={ref}
            id={name}
            name={name}
            type="radio"
            aria-label={label}
            {...props}
          />
          <label htmlFor={name} className="block text-sm font-medium text-gray-700">
            {label}
          </label>
        </fieldset>
      );

reactjs

react-hook-form

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-08-21 20:57:53

在WrapperRadio中使用RegistrationForm --您应该传递一个默认值。
控制器在WrapperRadio中的应用返回( onChange(e.target.checked)} {...props} label={label} />} />

票数 1

Stack Overflow用户

发布于 2022-08-24 11:13:54

下面是另一种方法，允许将输入的值作为字符串读取，但它的缺点是将onChange放入原子RadioButton组件中(而不是使其处于无状态状态)。

WrapperRadio in RegistrationForm

options是一个由所需的单选按钮回答选项组成的数组，它使WrapperRadio可重用。

    <WrapperRadioGroup
      name="radioSelection"
      label="This is a radio group label"
      control={control}
      options={ ["chocolate", "vanilla" ] }
      value="ice-cream"
     >

WrapperRadio中的控制器

通过options映射，为每个按钮创建一个新的单选按钮标签，并将onChange传递给原子RadioButton组件。

return (
    <>
      {/* {label} */}
      <Controller
        control={control}
        name={name}
        defaultValue={props.value}
        render={({ field: {onChange, ...props} }) => 
          options.map((option, index) => (
    
           <RadioButton
             key={index}
             {...props} 
             onChange={onChange}
             value={option}  
             label={label} 
          />
          ))
        }
      />
    </>  

  )

原子RadioButton元件

onChange用正确的值更新rhf的表单状态

return (
      <>
        <input 
          ref={ref} 
          name={name} 
          type="radio" 
          value={value} 
          aria-label={label}
          onChange={ () => props.onChange(props.value) }
          {...props} />
        <label htmlFor={name}>Radio answer option</label>
      </>
    )
  }