我知道React的useState钩子是一个异步方法，因此它有一个回调。然而，我想使初始用户输入更新(仅在第二次输入后才更新状态(为触发handleChange方法时的状态。我该如何做到这一点——更新反应迅速？
代码：
import React, { useState, createRef } from "react";
import { Link } from "react-router-dom";
import { useSelector, useDispatch } from 'react-redux';
import DocumentHead from "../DocumentHead";
import Button from "../Button";
import phoneLady from "../../assets/images/phoneLady.jpg";
import setBgImage from "../../utils/setBgImage"
export default function register() {
const pageName = "Regsiter";
const [form, setForm] = useState({
title: "",
firstName: "",
lastName: "",
emailAddress: "",
phoneNumber: "",
dateOfBirth: "",
organization: "",
password: "",
confirmPassword: "",
finalFormIsSlidedIn: false,
buttonIsDisabled: true,
termsAndConditionsIsChecked: false,
});
const handleChange = (e) => {
const target = e.target;
const name = target.name
const value = target.type === 'checkbox' ? target.checked : target.value
setForm((state) => {
return {
...state,
[name]: value
}
}, console.log(form))
}
const handleSubmit = (e) => {
e.preventDefault();
}
return (
<>
<DocumentHead title={pageName} />
<section>
<div id="orderbook-form">
<form className="h-full">
<div className="pt-20 pb-10 px-12">
<h1 id="orderbook-home" className="text-center mb-10 leading-6 md:hidden">
<Link to="/" className="text-gray-400">Orderbook Online</Link>
</h1>
<div className="px-4 sm:px-0 mb-3">
<h2 className="text-lg font-medium leading-6 pb-3 sm:pb-2">
Nice to meet you,
</h2>
<p className="mt-1 text-sm text-gray-600">
create an account to start using
Orderbook
</p>
</div>
<div className="grid grid-cols-1 gap-5">
<div
id="registration-steps"
className="col-span-12"
>
{/*Registration -- First step*/}
<div
id="first-step-fields"
className="col-span-12 grid grid-cols-1 gap-4"
>
<div className="col-span-12">
<select
id="title"
name="title"
autoComplete="title"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
value={form.value}
onChange={(e) => handleChange(e)}
>
<option defaultValue="Please choose">
Please choose
</option>
<option value="Mr">
Mr
</option>
<option value="Miss">
Miss
</option>
<option value="Mrs">
Mrs
</option>
<option value="Ms">
Ms
</option>
<option value="Dr">
Dr
</option>
<option value="Other">
Other
</option>
</select>
</div>
<div className="col-span-12 grid grid-cols-2 gap-4">
{/*Fix grid*/}
<div className="col-span-1">
<input
type="text"
name="firstName"
value={form.firstName}
id="first-name"
autoComplete="first-name"
placeholder="First name"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
onChange={(e) => handleChange(e)}
/>
</div>
{/*fix grid*/}
<div className="col-span-1">
<input
type="text"
name="lastName"
value={form.lastName}
id="last-name"
autoComplete="last-name"
placeholder="Last name"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
onChange={(e) => handleChange(e)}
/>
</div>
</div>
<div className="col-span-12">
<input
type="text"
name="emailAddress"
value={form.emailAddress}
id="email-address"
autoComplete="email"
placeholder="Email address"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
required
onChange={(e) => handleChange(e)}
/>
</div>
<div className="col-span-12 text-right">
<span
id="next-field-button"
className={`form-slide-button ${
form.finalFormIsSlidedIn
? "hidden"
: ""
}`}
onClick={() =>
slideFinalFormIn()
}
>
Next{" "}
<i
className="fa fa-long-arrow-right"
aria-hidden="true"
></i>
</span>
</div>
</div>
{/*Registration -- Final step*/}
<div
id="final-step-fields"
className="grid gap-4"
ref={finalFormStepRef}
>
<div className="col-span-12">
<input
type="tel"
name="phoneNumber"
id="phone-number"
value={form.phoneNumber}
pattern="[0-9]{4}-[0-9]{3}-[0-9]{4}"
autoComplete="phone-number"
placeholder="Phone number"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
required
onChange={(e) => handleChange(e)}
/>
</div>
<div className="col-span-12">
<input
type="text"
id="data-of-birth"
name="dateOfBirth"
value={form.dateOfBirth}
autoComplete="date-of-birth"
placeholder="Date of birth (MM/DD/YYYY)"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
onFocus={(e) =>
(e.target.type =
"date")
}
onBlur={(e) =>
(e.target.type =
"text")
}
onChange={(e) => handleChange(e)}
/>
</div>
{/*<div className="col-span-12">
<input
type="text"
id="organization"
name="organization"
value={form.organization}
autoComplete="organization"
placeholder="Organization/Company"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
onChange={(e) => handleChange(e)}
/>
</div>*/}
<div className="col-span-12 grid grid-cols-2 gap-4">
<div className="col-span-1">
<input
type="password"
id="password"
name="password"
value={form.password}
autoComplete="password"
placeholder="Password"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
required
onChange={(e) => handleChange(e)}
/>
</div>
<div className="col-span-1">
<input
type="password"
id="confirm-password"
name="confirmPassword"
value={form.confirmPassword}
autoComplete="confirm-password"
placeholder="Confirm password"
className="mt-1 focus:ring-white block w-full sm:text-sm bg-gray-300 form-field"
required
onChange={(e) => handleChange(e)}
/>
</div>
</div>
<div className="col-span-12 text-left">
<span
id="previous-field-button"
className="form-slide-button"
onClick={() =>
slideFinalFormOut()
}
>
<i
className="fa fa-long-arrow-left"
aria-hidden="true"
></i>{" "}
Previous
</span>
</div>
</div>
</div>
<div className="col-span-12">
<div className="flex items-start">
<div className="flex items-center h-5">
<input
id="terms-and-conditions"
name="termsAndConditionsIsChecked"
type="checkbox"
className="focus:ring-white h-4 w-4 text-indigo-600 border-black rounded"
required
onChange={(e) => handleChange(e)}
/>
</div>
<div className="ml-3 text-sm">
<label
htmlFor="terms-and-conditions"
className="font-medium text-black"
>
By signing up, you agree
to
</label>{" "}
<Link to="/">
Orderbook’s Terms of Use
& Privacy Policy
</Link>
</div>
</div>
</div>
<div className="col-span-12 mt-1">
<Button
type="submit"
title="Sign up"
buttonClass="register-button auth-button"
buttonDisabled={
form.buttonIsDisabled
? true
: ""
}
/>
</div>
<div
id="login-existing-account"
className="col-span-12 mt-1 account-signal"
>
<div className="text-center">
Already have an account?{" "}
<Link to="/login">Log in</Link>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</>
);
}
我认为你无法达到top 0，你可以使用表单库来减少渲染并明智地管理所有状态，请检查挂钩表单