Question

我有三种方法：

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为空。我以某种方式失去了事件。

我认为问题是，我没有使用异步并等待正确的方法。

Answer 1

您可以将此代码简化为

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：用于不区分大小写地测试字母数字的正则表达式

!!：将强制类型输入为布尔值，即如果值为空，则将是虚假的，双重否定将其变为true并返回到false

修改

根据评论中的讨论，为了仅在输入有效时设置code，我添加了一个if语句，如果值不为空白，则该if语句实际上会转换为（!inputIsBlank ），如果值是字母数字，并且输入的长度是六个字符，则将code设置为value。

Answer 2

当没有任何承诺时，您在两个函数中都使用了异步等待，这都是同步代码，因此您实际上不需要异步等待来解决此问题。也许编写您的验证代码以在未通过验证时抛出错误，然后在handleOnChange内运行三元

 handleOnChange = (e) => {
    !this.handleValidation(e)? return :
         this.setState({code: e.target.value}))
};

使用Async和Await解决多种方法后运行代码

2 个答案: