Question

我正在构建一个简单的待办事项列表，我想在提交时存储元素。我知道 handleSubmit() 有问题，但无法解决。

import React, { useState } from "react";

function List() {
  const [items, setItems] = useState([]);
  const [item, setItem] = useState("");

  function handleSubmit() {
      setItems([ ...items, item ]);
      console.log(items);
  }
  return (
    <div>
      <h3>To Do List</h3>
      <form onSubmit={handleSubmit()}>
        <input
          value={item}
          onChange={(event) => {
            setItem(event.target.value);
          }}
        />
        <ul>
          <li></li>
        </ul>
        <button type="submit">Add</button>
      </form>
    </div>
  );
}

export default List;

Answer 1

<form onSubmit={handleSubmit()}> 应该是 <form onSubmit={handleSubmit}>。

通过添加 ()，您正在调用 handleSubmit

Answer 2

您是直接调用 handleSubmit 函数而不是传递其引用。只需将 <form onSubmit={handleSubmit()}> 更改为 <form onSubmit={handleSubmit}>

您还需要防止默认表单提交操作。您可以在 handleSubmit 函数中添加 preventDefault 行

  function handleSubmit(event) {
      event.preventDefault();
      setItems([ ...items, item ]);
      console.log(items);
  }

错误：重新渲染过多。 React 限制渲染次数以防止无限循环

2 个答案: