Отключить кнопку отправки, если в форму не было внесено никаких изменений - PullRequest
Новая
       60

Отключить кнопку отправки, если в форму не было внесено никаких изменений

1 голос
/ 06 января 2020

У меня есть форма, которая использует react-bootstrap компоненты, и когда форма загружается, поля заполняются значениями по умолчанию, и эти поля можно редактировать. Я хочу, чтобы кнопка «Отправить» была отключена, если в форму не было внесено никаких изменений. Если в форму внесены какие-либо изменения, я хочу, чтобы кнопка отправки могла отправлять.

В angularjs вы можете сделать это, используя pristine, dirty et c. Как я могу сделать это в reactjs и реагировать bootstrap?

Моя форма 

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

1 Ответ

0 голосов
/ 06 января 2020

Поскольку вы не используете избыточную форму, я объясню в логике c, как вам нужно ее достичь

Таким образом, ваше состояние будет иметь ключ и значение, подобные приведенному ниже формату, это предварительно заполненные значения 

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

Таким образом, исходя из начального состояния isFormDirty , вы можете отключить кнопку, поскольку изменений нет

Теперь вам нужно присоединить метод к Форма на верхнем уровне, поскольку происходит делегирование события, вы получите событие из дочернего ввода, поэтому предположим, что firstName поле user изменилось, теперь вы можете иметь объект как внутри состояния, когда компонент загружается 

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

Теперь у вас есть два объекта changeValues ​​и formValues ​​

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
}

, поэтому на основе этого объекта ChangeValues, например, Object.values(this.state.changedValues) массив содержит true, вы можете сделать isFormDirty для true

с момента обновления состояния ваша кнопка активируется

Надеюсь, это поможет лучше понять проблему

...