我是React的新手,试图在表单中实现一个函数,但我就是不能让它工作。该表单使用react-hook-form,axios和Bootstrap 5.2.3。我试过,但无法使useState工作,我需要的是有声明的按钮(引导选项卡)默认禁用,直到我选择,婴儿的形式内,正确的选项之一,以解锁它即。而不是父亲或母亲(分别为值10和1),因为这两个已经有了自己的形式。我该怎么做?
编辑:文件是. jsx。使用React + Vite
下面是一个非常概括的代码:
<h2 className="bg-primary text-light rounded-top mb-0 pb-0 pessoaheader container">Registration Form</h2>
<form className="form-inline container border border-dark rounded-bottom formelement" onSubmit={handleSubmit(handleSubmitForm)}>
<br />
<nav className="nav nav-tabs">
<button className="nav-link active" data-bs-target="#abafilho" data-bs-toggle="tab" type="button"> Child's Data</button>
<button className="nav-link" data-bs-target="#abamae" data-bs-toggle="tab" type="button"> Mother's data</button>
<button className="nav-link" data-bs-target="#abapai" data-bs-toggle="tab" type="button"> Father's Data</button>
<button className="nav-link " data-bs-target="#abadeclarante" data-bs-toggle="tab" type="button"> Declarant's data</button>
</nav>
<div className="tab-content">
<div className="tab-pane active show fade" id="abafilho">
<div className="form-filho">
<div className="row pt-3">
<div className="col-lg-2 col-md-3 mb-2">
<label className="formlabels" htmlFor="Declaranttype">Declarant</label>
<select className="form-select form-control selecttype" id="Declaranttype" {...register("Declaranttype")}>
<Declaranttype />
</select>
</div>
</div>
</div>
</div>
</div>
<div className="tab-pane show fade" id="abapai">
</div>
<div className="tab-pane show fade" id="abadeclarante">
</div>
<button className="btn btn-primary btn-lg fw-semibold formbutton display-4 m-1" type="submit">Submit</button>
</form >
B是Declaranttype /文件中的内容:
<>
<option value="10">Father</option>
<option value="1">Mother</option>
<option value="3">Brother</option>
<option value="4">Sister</option>
<option value="5">Grandpa</option>
<option value="6">Grandma</option>
<option value="7">Other</option>
</>
Page的几乎完整的代码也在这里,非常感谢反馈codepen.io/caiourtiga/pen/BavwJev
1条答案
按热度按时间d4so4syb1#
使用watch method跟踪所选值
然后在你的按钮上,用这个