为什么反应把我的状态变成[对象对象]

Question

我有这个简单的组件：

这里是 CodeSandbox：https://codesandbox.io/s/fast-architecture-fgvwg?fontsize=14&hidenavigation=1&theme=dark

function Home() {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(name);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          value={name}
          onChange={setName}
          type="text"
          placeholder="name"
        />
        <button type="submit">
          submit
        </button>
      </form>
    </>
  );
}

export default Home;

只要我点击输入框，它就会变成[object object]，我很想知道为什么会这样。

Answer 1

您的 onChange 处理程序接收到一个 change event 对象。如果您想要新值，则需要从事件中获取它：event.target.value:

<input
  value={name}
  onChange={e => setName(e.target.value)}
  type="text"
  placeholder="name"
/>

当您将值转换为字符串时，例如在调用console.log 时，会调用该值的toString 方法，对于对象，该方法默认返回[object Object]。

Answer 2

您没有将值传递给您的name 变量onChange。 onChange 返回 event 您必须从中获取值并以这种方式设置名称。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    console.log(name);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input value={name} onChange={(e) => setName(e.currentTarget.value)} type="text" placeholder="name" />
        <button type="submit">submit</button>
      </form>
    </>
  );
}

这里的更新是onChange 属性。您正在获取事件 e 并将名称设置为 currentTarget 值。

onChange = { (e) => setName(e.currentTarget.value) }

Answer 3

您已将 onChange 设置为 setName。 setname是一个用来更新name值的函数。

您需要编写一个函数来处理用户键入名称时正在更新的名称值。设置onChange等于那个函数：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    console.log(name);
  };

  function handleChange(e) {
    e.preventDefault();
    setName(e.target.value);
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          value={name}
          onChange={handleChange}
          type="text"
          placeholder="name"
        />
        <button type="submit">submit</button>
      </form>
    </>
  );
}