Question

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

// 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}
/>

。

当输入类型为“文本”时有效，而当输入类型为“数字”时无效。

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

当我从Chrome浏览器检查开发者工具时，输入的值没有改变（但e.target.value起作用）
此外，当我检查console.log(regexAllowOneDot.exec(value)[0])时，即使该值仍具有一个degit（长度，如1或2或...），它也显示为null

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

Answer 1

好的，我现在知道了。您想要处理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

反应输入类型编号onChange缓慢

1 个答案: