Validation 反应钩形动态要求

大家好

我使用react钩子表单，我希望在一个文本输入上动态设置required。我有一个跟踪传递方法的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} 

const[delivery，setDelivery]=useState（false）；
交付方式
setDelivery（false）}/>
改善
setDelivery（true）}/>
传送
{errors.deliveryMethod&&errors.deliveryMethod.type==='required'&&“请选择传递方法”}
{交货？
地址
****
{errors.address&&errors.address.type==='required'&&“address is required”}
：null}

这里不需要

useState

，因为您可以使用RHF来处理无线电输入值的状态-您可以使用

useForm

提供的

watch

，来监视该字段的更改

由于您只针对特定的传递方法有条件地呈现“地址”输入，您还可以针对该字段的规则将

required

设置为

true

有一点很重要：由于v7，不会自动删除将卸载的字段（在您的情况下，由于条件呈现）。所以现在，您必须手动注销该字段。这就是为什么在CodeSandbox中单击“拾取”单选选项时会出现

取消注册

调用的原因

然而，目前存在一个持续的问题，因为这种新行为在某些情况下带来了缺点（例如字段的条件渲染）。因此，将来可能会再次在卸载时自动注销字段

---

非常感谢您的帮助。我会尝试一下，如果我成功的话，会让evryone知道：）太棒了，我刚尝试过，效果很好，谢谢knoefel，你就是那个人。因此，对于遇到这种情况的其他人，只需遵循沙箱；）我不是一个经常使用od stackoverflow的用户…我该怎么做呢？好的，很酷的人，我只是，再次感谢你