React - установите значение True для всех пустых полей ввода при отправке - PullRequest
Новая
       7

React - установите значение True для всех пустых полей ввода при отправке

1 голос
/ 24 июня 2019

Я хотел бы динамически установить значение true в состояние true, если поле ввода пусто.Это делается для того, чтобы я мог стилизовать каждое поле ввода, когда оно пустое, с помощью класса css, когда его состояние равно true.

В моем текущем коде он будет проходить через цикл и устанавливать для последнего пустого элемента значение true, даже если все входные данные пусты.На мой взгляд, я подумал, что он должен установить все, что пусто, в true, но похоже, что цикл будет распознавать только последнюю итерацию.

Как установить значение true для всех пустых входов?

HTML: 

<form noValidate onSubmit={this.handleSubmit}>
  <label>Name</label>
  <input className="form-input" type="text" name="name">

  <label>Email</label>
  <input className="form-input" type="text" name="email">

  <label>Message</label>
  <input className="form-input" type="text" name="message">
</Form>

Состояние: 

this.state = {
  errors: {
    name: false,
    email: false,
    message: false,
  },
};

JS: 

handleSubmit = (e) => {

let inputFields = document.getElementsByClassName('form-input');

for (var i = 0; i < inputFields.length; i++) {
  if (inputFields[i].value === '') {

    let inputName = inputFields[i].name;

    this.setState({
      errors: {
        [inputName]: true,
      },
    });
  }
}

}

Ответы [ 2 ]

1 голос
/ 24 июня 2019

Проблема в setState слияния только корневых ключей в состояние. В вашем случае ваше состояние { errors { ... } }, если вы выполните команду setState({ error: { ... } }), реакция заменяет весь ваш объект ошибки внутри состояния.

Вы можете создать объект errors в цикле и сделать setState только один раз: 

handleSubmit = (e) => {
  let inputFields = document.getElementsByClassName('form-input');
  let errors = {};
  for (var i = 0; i < inputFields.length; i++) {
    if (inputFields[i].value === '') {
      let inputName = inputFields[i].name;
      errors[inputName] = true;
    }
  }
  this.setState({errors});
}

Это лучший подход. Но это может помочь понять, как работает setState, если вы посмотрите на этот подход:

Вы можете переместить ключи из errors в корень своего состояния, поэтому реагирующий объединяет их в состояние вместо их замены. 

this.state = {
 nameError: false,
 emailError: false,
 messageError: false,
};

и 

this.setState({
  [`${inputName}Error`]: true,
});
0 голосов
/ 24 июня 2019

Чтобы достичь того, что вам нужно, при этом сохраняя структуру текущего состояния компонентов, рассмотрите следующие изменения в handleSubmit: 

handleSubmit = (e) => {
    let inputFields = document.getElementsByClassName('form-input');

    /* Define errors object which will contain updated errors state based
    on form values */
    let errors = {};

    for (var i = 0; i < inputFields.length; i++) {
    if (inputFields[i].value === '') {

        let inputName = inputFields[i].name;

        /* Gather all error state into a single object */
        errors = { ...errors, [inputName]: true };
    }
    }

    /* Call setState once - this is more efficient and simplifies updating
    the nested errors object */
    this.setState((state) => {

        /* Replace nested error state with newly defined errors object */
        return { ...state, errors }
    });
}

Здесь мы используем поведение состояния errors по отношению кформа, в которой она может быть воссоздана на основе значений входных данных формы во время функции handleSubmit.

Во-первых, объект errors определяется локально и составляется на основе значения входных данных формы.Этот errors объект фиксирует новое состояние ошибки формы на основе входных значений.Наконец, setState вызывается один раз посредством обратного вызова.Здесь локально созданный объект errors указывается как новое вложенное состояние errors компонента.

...