Question

我有一个React js表单。我想知道如何根据条件启用/禁用所有表单输入控件。请检查下面的代码并建议如何做...

return (
      <form id ="frm" onSubmit={this.onSubmitHandler}>

      <div className="animated fadeIn">
                <div className="form-group row">
<Button type="button"   text="Back" size="sm" onClick={this.onBackButtonClick} color="danger" className="pull-right  ml-1 "><i className="fa fa-ban"></i> Back</Button>
                       <Button type="submit" size="sm" color="success"  className="pull-right  ml-1 "><i className="fa fa-dot-circle-o"></i> Save</Button>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">First Name</label>
                  <div className="col-sm-3">
                    <input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" value={this.state.FirstName} required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
                  <div className="col-sm-3">
                    <input type="text" name="LastName" className="form-control form-control-sm" id="TxtLastName" placeholder="Last Name" value={this.state.LastName} required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
                  <div className="col-sm-3">
                    <input type="email" name ="EmailId" className="form-control form-control-sm" id="TxtEmailId" placeholder="EmailId" value={this.state.EmailId} required onChange={this.onChangeHandler}/>
                  </div>

                </div>

                <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">Mobile No</label>
                  <div className="col-sm-3">
                    <input type="text" name ="MobileNo" className="form-control form-control-sm" id="TxtMobileNo" placeholder="Mobile No" value={this.state.MobileNo} onChange={this.onChangeHandler} />
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Division</label>
                  <div className="col-sm-3">
                     <select name ="DivisionId" className="form-control" required value={this.state.DivisionId} onChange={this.onChangeHandler}>
                        {DivisionList}
                      </select>   
                  </div>


           /div>
          </form>
    );

ComponentDidMount事件以检查条件：-

componentDidMount() {
if (this.props.match.params.mode=="Edit"){
// enable form control
}
else
{
// disable form control
}

Answer 1

为ex创建状态<component v-for="field in custom-fields" v-is="field.type" :data="field.data"/>?。
在表单内使用html isFormDisabled，并使用fieldset属性，并提供disabled的值
使用逻辑根据需要启用/禁用

代码示例

isFormDisabled

如何根据条件启用/禁用反应形式

1 个答案: