Javascript 如果未对表单进行任何更改，请禁用“提交”按钮

我有一个表单，它使用

react bootstrap

组件，当表单加载时，字段将填充默认值，并且这些字段可以编辑。如果没有对表单进行任何更改，我希望保持“提交”按钮处于禁用状态。如果对表单做了任何更改，我希望submit按钮能够提交

在angularjs中，您可以使用

pristine

、

dirty

等进行此操作。如何在reactjs和react引导中进行此操作

我的表格

<Form noValidate validated={validated} onSubmit={this.handleSubmit}>
   <div id="" className="pb-3 pr-lg-5 pr-xs-0">
      <div id="form_data" className="pb-3 pr-0">

         <Form.Group as={Row} controlId="formAddress">
            <Form.Label column sm="2" lg="4">
               <label className="label_type2">Address</label>
            </Form.Label>
            <Col sm="10" lg="8">
            <Form.Control type="text" defaultValue={login.userInfoLoading === true ? 'Loading...' : userInfoAddress.address} className="input_text" required />
            </Col>
         </Form.Group>

         <Form.Group as={Row} controlId="formPostalCode">
            <Form.Label column sm="2" lg="4">
               <label className="label_type2">Postal code</label>
            </Form.Label>
            <Col sm="10" lg="4">
            <Form.Control type="text" defaultValue={login.userInfoLoading === true ? 'Loading...' : userInfoAddress.cep} className="input_text" required />
            </Col>
         </Form.Group>
      </div>

      <Button type="submit" size="lg" variant="light" className="mt-5 mb-3 btn_type1" id="button_primary_clr">Update information</Button>
   </div>
</Form>

地址
邮政编码
更新信息

由于您没有使用redux表单，我将解释您需要如何实现它的逻辑

因此，您的状态将有一个键和值，如下面的格式，这些是预填充的值

state = {formValues:{firstName: 'John', secondName: 'Doe', Address: ''}, isFormDirty: false}

因此，基于初始状态isFormDirty，您可以禁用该按钮，因为没有任何更改

现在您需要在顶层将一个方法附加到表单，因为发生了事件委派，您将从子输入中获取事件，因此假设firstName字段用户已更改，现在您可以在加载组件时将对象作为内部状态

changedValues: {firstName: false, secondName: false, Address: false}

现在有两个对象ChangedValue和FormValue

onFormHandleChange = (e) => {
 // compare the current value and pre populated value
  e.target.value === formValues[e.target.name]
// if its true
 changedValues[e.target.name] = true
 else false
}

所以基于这个变化，像

Object.values（this.state.changedValues）

数组包含true您可以将isFormDirty设置为true

由于状态更新，您的按钮被启用

---

我希望这能更好地理解这个问题

因为您没有使用redux表单，我将解释您需要如何实现它的逻辑

因此，您的状态将有一个键和值，如下面的格式，这些是预填充的值

state = {formValues:{firstName: 'John', secondName: 'Doe', Address: ''}, isFormDirty: false}

因此，基于初始状态isFormDirty，您可以禁用该按钮，因为没有任何更改

现在您需要在顶层将一个方法附加到表单，因为发生了事件委派，您将从子输入中获取事件，因此假设firstName字段用户已更改，现在您可以在加载组件时将对象作为内部状态

changedValues: {firstName: false, secondName: false, Address: false}

现在有两个对象ChangedValue和FormValue

onFormHandleChange = (e) => {
 // compare the current value and pre populated value
  e.target.value === formValues[e.target.name]
// if its true
 changedValues[e.target.name] = true
 else false
}

所以基于这个变化，像

Object.values（this.state.changedValues）

数组包含true您可以将isFormDirty设置为true

由于状态更新，您的按钮被启用

---

我希望这能更好地理解这个问题

因为您没有使用redux表单，所以需要通过编写自定义函数来处理它，因为redux表单有一个名为isDirty的属性@DILEEPTHOMAS没有。我正在为我的输入组件使用react引导。我已经添加了如何实现这一点的逻辑，请检查并让我知道！！因为您没有使用redux表单，所以需要通过编写自定义函数来处理它，因为redux表单有一个名为isDirty@DILEEPTHOMAS没有。我正在为我的输入组件使用react引导。我已经添加了如何实现这一点的逻辑，请检查并让我知道！！