Question

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

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

>>> type_a = df['Type C1'].apply(pd.Series).eq('Type A').any(1)
>>> df[df['BTP'].eq(42) & type_a]
   A  B  C-1  D  BTP           Type C1           Type C2
3  0  4    3  3   42  [Type A, Type B]  [Type A, Type B]

Answer 1

来自MDN文档：

“事件”接口的target属性是对将事件调度到的对象的引用。

在您的情况下，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的原因。

不使用参考

或者，您可以在输入中添加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>
  );
};

Answer 2

您的控制台日志应该在Submit方法之外。或登录event.target.value代替fname。

React.js setState无法通过onclick更新

2 个答案: