Reactjs 如何根据条件启用/禁用反应表单

我有一个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>
    );

• 为ex创建状态

  isFormDisabled

• 在表单中使用html

  fieldset

  ，使用

  disabled

  属性并提供

  isFormDisabled

• 使用您的逻辑根据您的需要启用/禁用

代码示例

。。。
状态={
isFormDisabled:false
}
componentDidMount（）{
if（this.props.match.params.mode==“编辑”）{
this.setState（{isFormDisabled:false}）
}
否则{
this.setState（{isFormDisabled:true}）
}
}
...
//内部渲染乐趣。。。
返回(
名字
...
...

没有基本信息。检查的条件是什么？

这是什么。onChangeHandler

函数正在执行？没有详细信息。谢谢回复，这很好，但我忘记了在表单中提到按钮。我只需要启用按钮，所有其他输入字段都应该禁用。请帮助我…您可以包装该按钮，但使用

legend

在字段集中启用按钮…请参阅示例…使用该按钮并相应地执行逻辑…如果需要更多信息，请使用您想要的内容更新您的问题，并提供您现有的代码。您可以使用disabled属性直接在按钮上使用“isFormDisabled”。类似这样，

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