React-parent组件将输入子级值缺失1个字符

Question

我创建了一个Input组件，像这样：

  import React, { useState } from 'react'
  const Input = ({ name, placeholder, type, className, inputRef, defaultValue, preventDefaultBehavior, style, timeout = 2000,
        onChange, onDoubleClick, onFocus, onBlur }) => {        
        const [value, setValue] = useState(defaultValue);
        const [typingTimeout, setTypingTimeout] = useState(0);        
        function handleChange(e) {
            if (typingTimeout)
                clearTimeout(typingTimeout);
            setValue(e.target.value);
            if (onChange) {
                setTypingTimeout(
                    setTimeout(function () {
                        onChange({ target: { name, value } });
                    }, timeout)
                );
            }
        };
        function handleKeyPress(e) {
            if (e.keyCode !== 13 || timeout <= 1000)
                return;
            if (typingTimeout)
                clearTimeout(typingTimeout);        
            onChange({ target: { name, value } });
        }
        return (
            <input
                name={name}
                className={className}
                type={type}
                ref={inputRef}
                placeholder={placeholder}
                style={style}
                value={value}
                onKeyPress={handleKeyPress}
                onChange={handleChange}
                onDoubleClick={onDoubleClick}
                onMouseDown={preventDefaultBehavior}
                onBlur={onBlur}
                onFocus={onFocus}
            />
        );
    };
    export default Input;

我正在像这样在父级上使用输入组件：

const [url, setUrl] = useState('');
<Input onChange={e => setUrl(e.target.value)} name="url" 
  placeholder="URL" type="text" defaultValue={url} />

但是，父组件未采用输入的最后一个字符，例如：

输入：“ abc”

父状态：“ ab”

  

我尝试了useEffect和async/await，但对我来说不起作用。