使用 formik 动态更新字段的最佳方法是什么?

问题描述 投票:0回答:0

我有一个表格,我正在尝试简化流程,但我不知道如何完成它。 当有人选择“自己的”选项时,我有一个需要动态更新的房东字段,但我不确定该怎么做。

          <div id="my-radio-group">     Do you Rent or Own your home? * 
 
</div>
          <div role="group" aria-labelledby="do-you-rent-or-own-radio-group">
            <label>
              <Field type="Radio" name="ownerRadio" value="Rent" />
              Rent
            </label>
            
            <label>
              <Field type="Radio" name="ownerRadio" id="Own" value="Own" />
              Own
            </label>
            
          

          </div>

          <div className="col d-flex justify-content-center">

<strong>           <ErrorMessage name="ownerRadio" className='errors' /></strong>
</div>


<div className="form-group">
    <label htmlFor="landlord">If you rent, provide name and phone number of landlord:

</label>
    
    <Field name="landlord" 
    id="landlord"
    placeholder="Enter landlord contact information"
    className={(formik.touched.landlord && formik.errors.landlord) ? 'form-control is-invalid' : 'form-control'} type="text" />

</div>
<div className="col d-flex justify-content-center">

<strong>           <ErrorMessage name="landlord" className='errors' /></strong>
</div>

这是我设置的代码,它最初禁用了房东字段,但后来我认为这会给使用辅助设备的人带来问题,所以我决定在有人说他们拥有而不是租用时用“na”填充该字段并且那就是我卡住的地方。

    if (values.ownerRadio  === "Own" )
    {     document.getElementById("landlord").value = "not applicable";

    document.getElementById("dogsallowedYes").disabled = true;
    document.getElementById("dogsallowedNo").disabled = true;

  }
```

any help would be appreciated.
reactjs formik
© www.soinside.com 2019 - 2024. All rights reserved.