axios REACT:如何通过在单独的选择元素中选择特定的选项来启用禁用的按钮?

nbysray5  于 2023-10-18  发布在  iOS
关注(0)|答案(1)|浏览(102)

我是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

d4so4syb

d4so4syb1#

使用watch method跟踪所选值

const { register, watch } = useForm();

const watchDeclarantType = watch("Declaranttype");
const buttonDisabled =
  !watchDeclarantType || ["1", "10"].includes(watchDeclarantType);

然后在你的按钮上,用这个

<button
  className="nav-link"
  data-bs-target="#abadeclarante"
  data-bs-toggle="tab"
  type="button"
  disabled={buttonDisabled}
>
  Declarant's data
</button>

相关问题