时间戳

首页 > 解决方案 > 反应输入类型号 onChange 很慢

javascript - 反应输入类型号 onChange 很慢

问题描述

我想设置一个输入，用户只能使用正则表达式输入数字和一个点（例如 number.number（8 位））。

// component A

<Input
    name="password"
    value={this.props.password}
    onChange={this.props.onChange}
/>

.

// component B

state = { password : '' }

handleChange = (e) => {
   const value = e.target.value;
   const regexAllowOneDot = /\d+(\.?\d{0,8})/;

   if(regexAllowOneDot.exec(value) !== null) {
        this.setState({
            password: regexAllowOneDot.exec(value)[0]
        })
    }else {
        this.setState({
            password: ''
        })
   }
}


<ComponentA
   password={this.state.password}
   onChange={this.handleChange}
/>

.

当输入类型为“文本”时它有效，但当类型为“数字”时它不起作用。

所以，当类型是“数字”时，我会在下面得到这些问题（但是，当类型是“文本”时，这些问题完全解决了）

  1. 当我从 Chrome 检查开发人员工具时，输入的值没有改变（但 e.target.value 有效）

  2. 此外，当我检查时console.log(regexAllowOneDot.exec(value)[0])，即使该值仍然具有一位数（长度，如 1 或 2 或...），它仍显示为 null

我想知道为什么以及如何解决此问题，或者您是否有更好的解决方案。

标签： javascriptreactjs

解决方案

好的，我现在明白了。您想处理 keyPress 事件并在必要时停止它，如下所示：

keyPress = e => {
  if (e.which === 46 && this.state.amount.includes(".")) {
    e.preventDefault();
    e.stopPropagation();
  }
};

然后将该函数向下传递给子组件并将其附加到 onKeyPress。

我已经包含了您的代码的工作分支，这里解决了问题：https ://codesandbox.io/s/7wnz19156x?codemirror=1&fontsize=14

推荐阅读