React Hook 表单动态 Require

Question

大家好，

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

在下面的代码中，显示/隐藏功能按预期工作，但动态要求却不然。

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

1. 您不需要useState这里，因为您可以使用 RHF 来处理无线电输入值的状态 - 您只需使用watch提供的useForm来观察该字段的变化
2. 由于您仅针对某种交付方式有条件地呈现“地址”输入，因此您也可以仅针对该字段的规则设置required为true

有一件重要的事情：从 v7 开始，不会自动删除将卸载的字段（在您的情况下，由于条件渲染）。因此，目前您必须手动取消注册该字段。这就是为什么在 CodeSandbox 中unregister单击“pickup”单选选项时会发生调用。

然而，目前正在进行讨论，因为这种新行为在某些情况下会带来缺点（例如字段的条件渲染）。因此，将来也许可以在卸载时自动取消注册字段。