React functional component onChange问题

Question

我是个新手，尝试创建一个简单的整数输入字段，只允许数字输入。

我的代码：

import React, {useState} from "react";


export const IntegerInput = props => {

    const maxLength = props.maxLength ? parseInt(props.maxLength) : 10;

    const [intValue, setIntValue] = useState(props.value);

    const inputMask = new RegExp(/^[0-9\b]+$/);

    function handleChange(e) {
        let inputValue = e.target.value;

        let isNumber = inputMask.test(inputValue);
        let isEmpty = inputValue === '';

        if (isEmpty || isNumber) {
            console.log('Update value to: ' + inputValue);
            setIntValue(inputValue);
        } else {
            console.log('Invalid input: ' + inputValue);
        }

    }

    return (
        <input name = {props.name}
               id = {props.name + '-id'}
               type = "text"
               className = {props.className}
               maxLength = {maxLength}
               value = {intValue}
               onChange = {handleChange}
        />
    );

}

控制台中没有错误，只有在需要时才会调用setIntValue，但仍然可以在输入字段中输入任何字符。

可能的问题是什么？

请注意，我想使用“文本”输入，而不是“数字”，而且我在React端遇到了问题，而不是JavaScript。

Answer 1

Ciao尝试像这样修改你的输入类型：

    <input name = {props.name}
           id = {props.name + '-id'}
           type = "number"
           className = {props.className}
           maxLength = {maxLength}
           value = {intValue}
           onChange = {handleChange}
    />

这应该可以解决您的问题。