React Input event.target.value 与实际输入值不匹配

Question

我有一个 HtmlInputElement，我在上面定义了一个 onKeyDown 处理程序，如下所示：

const keyDownHandler = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log("The event target: ", event.target);
    console.log("The event target value: ", event.target.value);
    if(event.key === ...) {
        if(textValue.length === 0) {
              event.preventDefault();
              //Do other things.
        }
        ....
    }
};

我注意到，如果我在输入框中键入一些输入，例如 asd，我将得到以下输出：

The event target:
    <input ... value="asd">

The target value: as

我在第二次打印时的目标值似乎总是落后 1 个输入，我不明白为什么它没有 return我的实际值。

我还定义了一个 onChange 处理程序，它在我的另一个按下按键处理程序之后触发。阅读 MDN 后，我认为 event.target.value 会 return 参数化 HTMLInputElement 及其实际值，但它似乎没有。

我是否应该访问其他一些属性以便在按键后获得新的计算值？

除此之外，我正在尝试使用 testing-library 在我的玩笑测试中模拟退格行为。

我用 userEvent.type(myInputBox, '{Backspace}'); 来做这个。在浏览器中，我注意到我的 onChange 处理程序被调用，但不是在开玩笑的测试中。我正在尝试模拟此行为，因为在按键事件中我没有阻止默认行为，并且我希望在输入框不为空时发生默认行为，否则执行其他操作。在浏览器中，会出现默认行为，但在测试中不会出现，我不确定缺少什么。

Answer 1

我认为你应该尝试 keyup 或 keypress 方法。

KeyDown – 当一个键被按下时
KeyUp – 当按下按钮被释放时，在值之后 input/textarea已更新（其中唯一）
KeyPress – 在这些和之间实际上并不意味着按下了一个键并发布。

React Input event.target.value 与实际输入值不匹配

React Input event.target.value does not match actual input value

reactjs

jestjs

react-testing-library

testing-library