输入类型号不更新输入值

Question

App 包含一个输入元素，该元素在输入、模糊和下一个按钮单击时更新。当我在开发工具中检查元素时，value 属性会在模糊和下一步按钮单击时更新，但不会在输入时更新。

import * as React from "react";
import { render } from "react-dom";

interface IAppProps {
  InputVal: number;
  onEnter: (num: number) => void;
}

const Parent: React.FC = () => {
  const [currentValue, setCurrentValue] = React.useState(1);
  const grabVal = (val: number) => {
    console.log("New value::", val);
    setCurrentValue(val);
  };

  return <App InputVal={currentValue} onEnter={grabVal} />;
};

const App: React.FC<IAppProps> = ({ InputVal, onEnter }) => {
  const inputRef: any = React.createRef();
  const handleEnterKey = (e: any) => {
    if (e.keyCode === 13) {
      onEnter(Number((e.target as HTMLInputElement).value));
    }
  };

  const nextClick = (e: any) => {
    inputRef.current.value = InputVal + 1;
    onEnter(InputVal + 1);
  };

  const blurry = (e: any) => {
    onEnter(Number(e.target.value));
  };

  return (
    <>
      <input
        type="number"
        onKeyUp={handleEnterKey}
        ref={inputRef}
        defaultValue={InputVal as any}
        onBlur={blurry}
      />
      <button onClick={nextClick}>Next</button>
    </>
  );
};

render(<Parent />, document.getElementById("root"));

如何在输入点击时更新它？

工作演示：https://codesandbox.io/s/react-typescript-7bkl7

Answer 1

你想更新什么？

代码在理论上按照它应该的方式工作，但是当您执行 keyup 调用并在事件处理程序中所做的只是控制台记录值并将其设置为新状态。

在下一个方法调用中增加数字的唯一方法。

 <input
        type="number"
        onKeyUp={handleEnterKey}
        ref={inputRef}
        defaultValue={InputVal as any}
        onBlur={blurry}
        value={InputVal as number}
      />