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时更新它?
答案 0 :(得分:1)
您想更新什么?
代码在理论上应有的作用,但是当您进行键盘调用和事件处理程序时,您要做的就是控制台记录该值并将其设置为新状态。
这是在下一个方法调用中增加数字的唯一方法。
<input
type="number"
onKeyUp={handleEnterKey}
ref={inputRef}
defaultValue={InputVal as any}
onBlur={blurry}
value={InputVal as number}
/>