反应功能组件onChange问​​题

Question

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

我的代码：

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

请尝试修改您的输入类型，

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

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