Выполнить код после разрешения нескольких методов с помощью Async и Await - PullRequest
Новая
       12

Выполнить код после разрешения нескольких методов с помощью Async и Await

0 голосов
/ 17 июня 2019

У меня есть три метода: 

isSixCharactersLong(event) {
    const input_len = event.target.value.length;

    if (input_len === 6) {
        this.setState({isSixCharactersLong: true})
    } else {
        this.setState({isSixCharactersLong: false})
    }
}

isAlphanumeric(event) {
    const input_str = event.target.value;

    for (let i = 0; i < input_str.length; i++) {
        const code = input_str.charCodeAt(i);
        if (!(code > 47 && code < 58) && // numeric (0-9)
            !(code > 64 && code < 91) && // upper alpha (A-Z)
            !(code > 96 && code < 123)) { // lower alpha (a-z)
            this.setState({isAlphanumeric: true});
        } else {
            this.setState({isAlphanumeric: false});
        }
    }
}

isEmpty(event) {
    event.target.value ? this.setState({inputIsBlank: false}) : this.setState({inputIsBlank: true});
}

Что я хочу сделать - это запустить функцию после разрешения этих трех методов.Итак, я написал следующее: 

async handleValidation(e) {
    this.isAlphanumeric(e);
    this.isEmpty(e);
    this.isSixCharactersLong(e);
}

И затем у меня есть последний метод, который запускается моим приложением React. 

handleOnChange = async (e) => {
    await this.handleValidation(e)
        .then(() => this.setState({code: e.target.value}))
};

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

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

Ответы [ 2 ]

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

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

 handleOnChange = (e) => {
    !this.handleValidation(e)? return :
         this.setState({code: e.target.value}))
};
1 голос
/ 17 июня 2019

Вы можете уменьшить этот код до, 

handleOnChange = (e) => {
  const { value } = e.target
  const isAlphanumeric = /^[a-z0-9]+$/i.test(value)
  const isSixCharactersLong = value && value.length === 6
  const inputIsBlank = !!value // or Boolean(value)

  this.setState({ isAlphanumeric, isSixCharactersLong, inputIsBlank })

  if (!inputIsBlank && isAlphanumeric && isSixCharactersLong)
    this.setState({ code: value })
}

/^[a-z0-9]+$/i: регулярное выражение для проверки буквенно-цифровых символов без учета регистра

!!: введите приведение к логическому значению, т. Е. Если значение пусто, оно будет ложным, двойное отрицание превращает его в истинное значение и возвращает обратно к false

Редактировать

В соответствии с обсуждением в комментариях, чтобы установить code, только если ввод действителен, я добавил оператор if, который по существу транслируется в, если значение не пустое (!inputIsBlank) и если значение является буквенно-цифровым, и если длина ввода составляет шесть символов, тогда установите code в value.

...