React Hook 表单动态要求

Question

大家好，

我使用的是 React 钩子形式，我想在一个文本输入上动态设置所需的内容。我有一个 useState 跟踪交付方法和更新该状态的单选按钮。然后所需的文本输入应该动态地基于该状态。因此，如果送货方式是“送货”，我们需要您的地址，如果是“自取”，我们不需要您的地址。我希望这是有道理的。

在下面的代码中，show/hide 功能按预期工作，但动态要求没有。

const [ delivery, setDelivery ] = useState(false);

<InfoBlock>
  <strong>Delivery Method</strong>
  <RadioGroup>
    <RadioBlock>
      <input type="radio" id="pickup" name="pickup" {...register("deliveryMethod", {required: true})} 
        value="pickup" onClick={() => setDelivery(false)} />
      <h5>Pickup</h5>
    </RadioBlock>                
    <RadioBlock>
      <input type="radio" id="deliver" name="delivery" {...register("deliveryMethod", {required: true})}  
        value="delivery" onClick={() => setDelivery(true)} />
      <h5>Delivery</h5>
    </RadioBlock>                   
  </RadioGroup>
</InfoBlock>
<ErrorMsg>
  {errors.deliveryMethod && errors.deliveryMethod.type === 'required' && "Please select delivery method"}
</ErrorMsg>

{delivery ? 
  <div>
    <InfoBlock>
      <strong>Address</strong>
      **<input type="text" id="address" name="address" 
        {...register("address", {required: delivery })}  />**
    </InfoBlock>
    <ErrorMsg>
      {errors.address && errors.address.type === 'required' && "Address is required"}
    </ErrorMsg>            
  </div> : null}

Answer 1

此处不需要 useState，因为您可以使用 RHF 来处理无线电输入值的状态 - 您只需使用 watch，由 useForm 提供，观察该字段的变化
当您有条件地只为特定的交付方式呈现 'address' 输入时，您也可以针对该字段的规则将 required 设置为 true

有一件重要的事情：自 v7 以来，不会自动删除将卸载的字段（在您的情况下，由于条件渲染）。所以现在，您必须手动注销该字段。这就是为什么在 CodeSandbox 中有 unregister 调用，当单击 'pickup' 单选选项时。

但是，目前 discussion 正在进行，因为这种新行为在某些情况下会带来不利影响（例如字段的条件呈现）。所以也许将来有可能在卸载时自动注销字段。

React Hook 表单动态要求

React Hook Form Dynamic Require

validation

react-hook-form