Question

我有两个反应成分。 App渲染出一个输入元素，其defaultValue由Parent组件提供。在输入keyup事件时，我将输入的当前值最多发送到Parent，这将更新向下发送的prop作为新值。

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 handleEnterKey = (e: any) => {
    if (e.keyCode === 13) {
      onEnter(Number((e.target as HTMLInputElement).value));
    }
  };
  return (
    <input
      onKeyUp={handleEnterKey}
      key={InputVal}
      defaultValue={InputVal as any}
    />
  );
};

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

问题在于，每次按Enter键，对输入的关注都会丢失，我每次都必须再次输入。如何防止这种情况发生。

我不能使用的东西：

自动对焦属性-原因是输入旁边还有其他按钮，其功能与Enter键相同。因此，自动聚焦于输入将对此产生干扰。
使用onChange-因为我只想在输入键按下时将新值发送到Parent，然后在关闭选项卡时才发送。

运行示例：https://codesandbox.io/s/react-typescript-6bd5e

在输入按键上保留对输入字段的关注

0 个答案: