Функция, запускаемая при вводе ввода, должна запускаться при загрузке страницы

Question

У меня есть форма с тремя полями ввода, кнопкой «Обновить» и кнопкой «Отмена». В настоящее время я работаю над отключением кнопки «Обновить», если какое-либо из трех полей пусто, и затем снова включаю кнопку после заполнения всех полей. Поля ввода и кнопки формы хранятся в отдельных компонентах, поэтому я перетаскивал значения полей ввода в соответствующий компонент, используя манипуляции с DOM.

У меня есть функция, написанная с использованием метода find lodash, которая должна помочь, но по какой-то причине она запускается, когда в поле ввода было внесено изменение, а не при загрузке страницы. Кроме того, он извлекает предыдущее значение поля ввода вместо фактического значения, отображаемого при загрузке страницы.

Например, если страница загружается без значения в одном из полей ввода, кнопка «Обновить» будет включена. После того, как вы введете первый символ в пустое поле ввода, например, букву A, кнопка будет отключена, и функция будет считывать значение поля как пустое. Если я затем введу букву S в поле, поэтому ее фактическое значение равно AS, кнопка будет снова активирована, и функция будет считать значение как A, его предыдущее значение.

Поскольку функция возвращает логическое значение, я вызываю его, когда передаю отключенную опору кнопке. Ниже описана функция, которую я написал, а также способ ее вызова в функции Render. Я чувствую, что есть кое-что очевидное, что я упускаю, и если кто-то может оказать помощь в этом, я очень ценю это. Пожалуйста, дайте мне знать, если от меня требуется дополнительная информация.

Проверка отключенной кнопки:

  disableButtonCheck = () => {
    const dataField = document.getElementsByClassName('InputField__input___i2o8Y');

    const nullValueChecker = find(dataField, (field) => {
      return field.defaultValue === '';
    });

    if (nullValueChecker) {
      return true;
    }
    return false;
  }

Отключить кнопку в Render:

  <div className={style['action-buttons']}>
    <PrimaryButton
      onClick={() => {
        this.updateHandler();
      }}
      disabled={this.disableButtonCheck()}              
      extraClassName={style.update}
      data-action="update"
    >

Обновление: я должен был отметить, что я называю поля ввода как класс, они называются массивом объектов. Я пытаюсь перебрать массив и вернуть только истинное значение, если найдены пустые строки, в противном случае вернуть false, если их нет.

Answer 1

Я обнаружил, что эта проблема не связана с тем, когда запускается сама функция. Проблема заключается в том, что элементы DOM устанавливаются в мою переменную внутри функции, когда пользователь вводит в поле, а не когда функция фактически вызывается.

Answer 2

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

Состояние:

state = {
  disabledSubmit: true
}

Форма:

<form onSubmit={this.submitFunc}>

    <input className="form-input" type="text" onChange={this.checkValue}/>
    <input className="form-input" type="text" onChange={this.checkValue}/>
    <input className="form-input" type="text" onChange={this.checkValue}/>
    <input className="form-input" type="text" onChange={this.checkValue}/>

    <input class="form-submit" type="submit" disabled={this.state.disabledSubmit}/>

</form>

Функция:

checkValue = () => {
   var inputs = document.getElementsByClassName('form-input')
   var arr = []
   for (var i =0; i < inputs.length; i++){
      inputs[i].value === '' ? arr.push(inputs[i].value) : null
   }
   arr.length > 0 ? this.setState({disabledSubmit: true}) : this.setState({disabledSubmit: false})
}

К сожалению, вы не можете использовать такие функции, как filter или map при работе с массивом элементов HTML, поэтому вам нужно использовать цикл for.

Надеюсь, это поможет!

Редактировать: Первоначально я сказал, что вы можете использовать сбор всех входных данных во время componentDidMount и сохранять их в состоянии, чтобы вам не приходилось делать document.getElementsByClassName каждый раз, когда кто-то что-то печатает. Если вы держите элементы в состоянии, вы В любом случае придется обновить элементы в onChange, чтобы отслеживать изменения и обновлять их в состоянии. Так что это, наверное, лучше.

Answer 3

Я должен предвосхитить этот ответ тем фактом, что способ React заключается в непосредственном присоединении onChange реквизита ко входам и соответствующем обновлении состояния компонента.

Если по какой-либо причине у вас нет доступа к элементам input, альтернативой может быть использование componentDidMount и присоединение обработчиков событий к событиям oninput или onchange:

componentDidMount() {
  const inputs = document.querySelectorAll("input[type=text]");
  inputs.forEach(input => {
    input.oninput = this.handleInput;
    // use onchange to only call the handler when the input is blurred (focus transitions out of the input)
  });
}

handleInput = e => {
  const inputName = e.target.name;
  if (e.target.value) {
    // The input has some input, so set it's state to true
    this.setState({ [inputName]: true, message: "" });
  } else if (this.state[inputName]) {
    // The input no longer has any input, so set it's state to false
    this.setState({ [inputName]: false, message: "" });
  }
};

render() {
  // This boolean will be reevaluated on each render which is called after each setState.
  const isButtonActive =
    this.state["input-1"] && this.state["input-2"] && this.state["input-3"];
  return (
    <form onSubmit={this.handleSubmit}>
      <Input name="input-1" />
      <Input name="input-2" />
      <Input name="input-3" />
      <button disabled={!isButtonActive}>Submit</button>
      <div>{this.state.message}</div>
    </form>
  );
}

Чтобы увидеть рабочий пример, проверьте эту песочницу: https://codesandbox.io/s/5koq5nv32l

Answer 4

Используя jquery, вы можете сделать что-то вроде этого:

$(document).ready(function(){
    $('.updateButton').prop('disabled',true);
    $('#inputFeild').keyup(function(){
        $('.updateButton').prop('disabled', this.value == "" ? true : false);     
    })
});  

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