React.js setState 没有通过 onclick 获得更新

Question

这是我的示例代码，它非常基础，我只想在单击提交后控制 fname。当我第一次按下时，我得到一个空行，但是当我第二次按下按钮时，我得到一些空值。我附上了控制台的屏幕截图。

我不想将我的代码更改为 class 并使用某种方法在控制台中获取值。

screenshot for console output

import React,{useState} from 'react'

export const anyComponent = () => {
const [fname, setFname] = useState('')

const submit = (event) =>{
    setFname({fname: [event.target.value] })
    console.log(fname)
}
return(
<div>
    <input name="fname"  type="text" placeholder="Enter your First Name" />
    <button onClick={submit}>Submit</button>

</div>

)
}

Answer 1

您的控制台日志应该在提交方法之外。或者记录 event.target.value 而不是 fname.

Answer 2

来自 MDN 文档：

The target property of the Event interface is a reference to the object onto which the event was dispatched.

在您的情况下，event.target 将指向按钮而不是输入。

你需要的是对输入的引用，你可以像这样使用 useRef 钩子

import React, { useState, useRef } from "react";

export default anyComponent = () => {
  const inputEl = useRef(null);
  const [fname, setFname] = useState("");

  const submit = event => {
    setFname({ fname: [inputEl.current.value] });
  };

  console.log(fname);
  return (
    <div>
      <input
        name="fname"
        ref={inputEl}
        type="text"
        placeholder="Enter your First Name"
      />
      <button onClick={submit}>Submit</button>
    </div>
  );
};

此外，setState 是异步的，这就是为什么您在调用 setFname 后不会在控制台中看到结果的原因。但是，您会在下一次渲染时在控制台中看到更新的 fName，这就是我将其移出 submit.

的原因

没有useRef

或者，您可以在输入上添加 onChange 处理程序并从那里更新状态 fname

function App(){
  const [fname, setFname] = useState("");

  const submit = () => {
    console.log(fname);
  };

  const handleChange = ev => {
   setFname({ fname: [ev.target.value] });
  }

  return (
    <div>
      <input
        name="fname"
        onChange={handleChange}
        type="text"
        placeholder="Enter your First Name"
      />
      <button onClick={submit}>Submit</button>
    </div>
  );
};

React.js setState 没有通过 onclick 获得更新

React.js setState not getting update wiith onclick

onclick

reactjs

use-state