状态不按事件听众之间的预期更新

Question

我有两个输入。

Email Address

First Name

在初始加载时，名字被隐藏。

单击电子邮件地址输入，将隐藏DIV并显示名字输入。它还将隐藏在输入上方的DIV，输入将填充该空间。

现在，我正在寻找的功能是在用户单击电子邮件地址输入之后，然后用户单击名字，名字不应消失，div返回。

要这样做，目前，我在onBlur事件侦听器上添加了lodash debounce延迟，以查看用户是否专注于名字输入。

我有一个状态变量onBlurWait，默认为 false并在用户重点关注名字输入时更新为 true。

关注名字输入，调用onBlur事件侦听器检查onBlurWait状态的值。此听众暂时只返回console.log或onBlurWait。

电子邮件地址输入上的onBlur似乎在名字输入的onFocus之前被调用。因此，onBlurWait状态似乎没有更新，因此onBlur事件侦听器中的console.log将返回false。

这是一个代码框，可以帮助您进行播放，因此您可以希望了解我在上面引用的内容。

下面是我的组件

import React, { useState } from "react";
import ReactDOM from "react-dom";
import _ from "lodash";
import InputControl from "./InputControl";
import "./styles.css";
const App = () => {
  const [hideContent, setHideContent] = useState(false);
  const [emailSignUpRef, setEmailSignUpRef] = useState(null);
  const [firstNameSignUpRef, setFirstNameEmailSignUpRef] = useState(null);
  const [onBlurWait, setOnBlurWait] = useState(false);
  let registerEmailInput = null;
  let firstNameInput = null;
  // If you click on email address then on first name, I would expect the console.log below to return true
  // due to when a user focuses on the first name input the handleInputFocus function gets called
  // inside that function, setOnBlurWait(true); is ran updating the value of onBlurWait to true
  // But it seems like it has not actually been updated
  // Now when you click on email address to first name, back to email address and first name again, the console log now returns true?
  const waitOnUpdateState = _.debounce(() => console.log(onBlurWait), 2000);
  const hideContentAfterState = _.debounce(
    () =>
      setHideContent(
        emailSignUpRef.length > 0 || firstNameSignUpRef.length > 0 || onBlurWait
      ),
    2000
  );
  const handleOnFocus = event => {
    setEmailSignUpRef(registerEmailInput.value);
    setFirstNameEmailSignUpRef(firstNameInput.value);
    setHideContent(true);
  };
  const handleOnInput = () => {
    setEmailSignUpRef(registerEmailInput.value);
    setFirstNameEmailSignUpRef(firstNameInput.value);
  };
  const handleInputFocus = () => {
    console.log("clicked on first name, onBlurWait should be set as true");
    setOnBlurWait(true);
  };
  const handleOnBlur = () => {
    console.log("clicked away from email address");
    // waitOnUpdateState is just a test function to return a console log, hideContentAfterState is what is going to be used
    waitOnUpdateState();
    hideContentAfterState();
  };
  return (
    <div className="App">
      <div className={hideContent ? "hidden" : "visible"} />
      <InputControl
        autoComplete="off"
        refProp={input => {
          registerEmailInput = input;
        }}
        onInput={handleOnInput}
        onFocus={handleOnFocus}
        onBlur={handleOnBlur}
        type="text"
        name="emailAddressRegister"
        placeholder="Email address"
        label="Email Address"
      />
      <InputControl
        className={
          !hideContent ? "InputControl--hidden" : "InputControl--visible"
        }
        autoComplete="off"
        refProp={input => {
          firstNameInput = input;
        }}
        onInput={handleOnInput}
        onFocus={handleInputFocus}
        type="text"
        name="firstName"
        placeholder="First Name"
        label="First Name"
      />
      <input type="submit" value="Submit" />
    </div>
  );
};
export default App;

Answer 1

考虑使它变得更简单，您正在考虑它。

onFocus和 onBlur都将relatedTarget作为其合成键盘中的属性之一。在onBlur的情况下，relatedTarget是焦点离开target的DOM元素。

您可以做的是处理blur事件，并将事件的relatedTarget属性与输入参考文献进行比较。然后，您将能够弄清楚焦点是在页面上留下另一个表单元素还是其他dom元素。