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"));

如何在输入click时更新它？

正在运行的演示：https://codesandbox.io/s/react-typescript-7bkl7

Answer 1

您想更新什么？

代码在理论上应有的作用，但是当您进行键盘调用和事件处理程序时，您要做的就是控制台记录该值并将其设置为新状态。

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

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

输入类型编号未在输入时更新值

1 个答案: