React-UseState hook->状态更新不会立即重新渲染页面

Question

试图理解状态更新 -UseState React 钩子。在文本区域的 onchange 事件中设置消息会立即重新呈现并能够看到更新的消息状态 (handleChangeMessage)。 但是在 on-Keypress 事件中更新状态时不会立即显示更新的消息文本 (handleKeyPressMessage)。

为什么 handleKeyPressMessage- 不呈现最新的值，但 handleChangeMes​​sage 呢？ 这里的讽刺是，handleKeyPress 中的日志语句在 onchange 事件之前首先执行。

代码沙盒链接：https://codesandbox.io/s/usestate-01-forked-lvyio?file=/src/index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Message = () => {
  const [handleChangeMessage, setHandleChangeMessage] = useState("");
  const [sendButtonClass, setSendButtonClass] = useState("send-disabled");
  const [handleKeyPressMessage, setHandleKeyPressMessage] = useState("");

  const handlechange = (e) => {
    console.log("change");
    setHandleChangeMessage(e.target.value);
  };

  const handleKeyPress = (e) => {
    console.log("key");
    setHandleKeyPressMessage(e.target.value);
    if (handleChangeMessage == "") {
      setSendButtonClass("send-disabled");
    } else {
      setSendButtonClass("send");
    }
  };
  return (
    <div>
      <input
        type="text"
        value={handleChangeMessage}
        placeholder="Enter a message"
        onChange={handlechange}
        onKeyPress={handleKeyPress}
      />
      <button className={sendButtonClass}>Send</button>
      <p>
        "message updated via onChange event ======> : "
        <strong>{handleChangeMessage}</strong>
        <br />
        "message updated via onKeyPress event =====> : "
        <strong>{handleKeyPressMessage}</strong>
      </p>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Message />, rootElement);

更新

这里的问题是在 onchange 事件（更新句柄更改消息）之前首先触发 keypress 事件。因此输入元素在 HandleKeyPress 事件中具有过时的值（e.target.value 即 handleChangemessage） 将 keypress 事件更改为 keyup 将解决此问题 阿布舍克建议

Answer 1

event.target 返回触发事件的元素。由于事件是由用户按键触发的，因此没有这样的元素。您应该检查您的 e.target.value 是否返回未定义。如果是这样，则通过为其提供唯一 ID 来从您的输入字段中获取值，使用类似：

const handleKeyPress = (e) => { console.log("key"); setHandleKeyPressMessage(document.getElementById("your-input-id").value); };

Answer 2

首先，在实现层面上应该假设依赖它可能不是一件好事。类似于关注post

keypress 在 on-change 之前触发，并且无法访问将绑定到输入元素的新值。

1. 更改事件触发事件处理程序handlechange
2. 异步更新状态 (handlechange)
3. 将新值handlechange 绑定到输入元素并导致重新渲染。

---

但您可以访问事件的 key 属性以获取最后按下的键并将其联系到上一个 keyPress 状态

const handleKeyPress = (e) => {
  console.log("key"); // to see the input value in this stage e.target.value
  setHandleKeyPressMessage(e.target.value + e.key);
};

Answer 3

代替

onKeyPress={handleKeyPress}

使用

onKeyUp={handleKeyPress}