使用传播运算符时，onKeyDown的事件处理程序无法正常工作

Question

我正在尝试使用转义键重置<input>的值。我正在使用传播运算符修改要发送的事件对象参数。

为什么这不起作用，但是第二个片段可以呢？

handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
    const {onChange, onKeyDown} = this.props;

    if (event.key === KEYBOARD_EVENT_KEY.ESCAPE) {
      onChange({
        ...event,
        currentTarget: {
          ...event.currentTarget,
          value: ""
        }
      });
    }

    if (onKeyDown) {
      onKeyDown(event);
    }
  };

第二个片段：

handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
    const {onChange, onKeyDown} = this.props;

    if (event.key === KEYBOARD_EVENT_KEY.ESCAPE) {
      const newEvent = {...event};
      newEvent.currentTarget.value = "";

      onChange(newEvent);
    }

    if (onKeyDown) {
      onKeyDown(event);
    }
  };

编辑：这是onChange属性的功能，它来自父组件。添加了控制台日志。

handleOnChange: React.ReactEventHandler<HTMLInputElement> = event => {
  const { value, name } = event.currentTarget;

  console.log(event.currentTarget);

  this.setState(prevState => ({
    ...prevState,
    [name]: value
  }));
};

控制台：

value: ""
__reactEventHandlers$psprxavxig:
    autoComplete: "off"
    autoCorrect: "off"
    className: "asd-input"
    disabled: undefined
    id: "asd-zxc-form-length-input"
    max: undefined
    min: 0
    name: "length"
    onBlur: undefined
    onChange: ƒ handleChange(event)
    onFocus: undefined
    onKeyDown: ƒ (event)
    onKeyUp: undefined
    placeholder: "Length"
    step: undefined
    type: "number"
    value: "1231"
    __proto__: Object
__reactInternalInstance$psprxavxig: FiberNode
    actualDuration: 0.0549999822396785
    actualStartTime: 353616.4250000147
    alternate: FiberNode {tag: 5, key: null, elementType: "input", type: "input", stateNode: input#asd-zxc-form-length-input.asd-input, …}
    child: null
    childExpirationTime: 0
    contextDependencies: null
    effectTag: 4
    elementType: "input"
    expirationTime: 0
    firstEffect: null
    index: 0
    key: null
    lastEffect: null
    memoizedProps: {className: "asd-input", id: "asd-zxc-form-length-input", name: "length", type: "number", step: undefined, …}
    memoizedState: null
    mode: 4
    nextEffect: FiberNode {tag: 1, key: null, elementType: ƒ, type: ƒ, stateNode: asdInput, …}
    pendingProps: {className: "asd-input", id: "asd-zxc-form-length-input", name: "length", type: "number", step: undefined, …}
    ref: null
    return: FiberNode {tag: 5, key: null, elementType: "div", type: "div", stateNode: div.asd-input-wrapper, …}
    selfBaseDuration: 0.004999979864805937
    sibling: null
    stateNode: input#asd-zxc-form-length-input.asd-input
    tag: 5
    treeBaseDuration: 0.004999979864805937
    type: "input"
    updateQueue: null
    _debugHookTypes: null
    _debugID: 242
    _debugIsCurrentlyTiming: false
    _debugOwner: FiberNode {tag: 1, key: null, elementType: ƒ, type: ƒ, stateNode: asdInput, …}
    _debugSource: null
    __proto__: Object
_valueTracker:
    getValue: ƒ ()
    setValue: ƒ (value)
    stopTracking: ƒ ()
    __proto__: Object
_wrapperState:
    controlled: true
    initialChecked: undefined
    initialValue: ""
    __proto__: Object
__proto__: Object