ReactJS Todo应用点击添加按钮仍刷新，已加preventDefault无效

直接导致页面刷新的原因 #

你在addTodoHandler里写了event.preventDefaults()，这里方法名拼写错误，正确的应该是event.preventDefault()——多写了一个s。因为没有正确调用阻止表单默认提交行为的方法，浏览器会执行默认的表单提交动作，导致页面刷新。

其他需要修正的问题 #

1. 禁止直接修改props数组：props.todos.push()会直接修改父组件传递过来的todos数组，违反React中props只读的原则，容易引发不可预测的状态异常。
2. 传递给addItem的参数错误：数组的push方法返回的是数组的新长度，而非你刚创建的todo对象，这会导致父组件接收到的是数字而非有效todo数据。

修正后的代码 #

import { useState } from "react";
import classes from "./TodoForm.module.css";

const TodoForm = (props) => {
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredDescription, setEnteredDescription] = useState("");

  const titleChangeHandler = (e) => {
    setEnteredTitle(e.target.value);
  };

  const desChangeHandler = (e) => {
    setEnteredDescription(e.target.value);
  };

  const addTodoHandler = (event) => {
    // 修正阻止默认行为的方法名
    event.preventDefault();
    
    // 先创建完整的新todo对象
    const newTodo = {
      id: Math.random() * 100000000,
      title: enteredTitle,
      desc: enteredDescription,
    };
    
    // 将新todo传给父组件的处理方法
    props.addItem(newTodo);
    
    // 清空输入框内容
    setEnteredTitle("");
    setEnteredDescription("");
  };

  return (
    <div className={classes["form-container"]}>
      <h2>Add Todo</h2>
      <form onSubmit={addTodoHandler}>
        <input
          onChange={titleChangeHandler}
          type="text"
          name="title"
          id="title"
          placeholder="Title"
          value={enteredTitle}
        />
        <textarea
          onChange={desChangeHandler}
          name="description"
          placeholder="Description"
          id=""
          cols="30"
          rows="10"
          value={enteredDescription}
        ></textarea>
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
};

export default TodoForm;

另外，父组件需要通过状态更新来处理新todo，示例如下：

// 父组件代码示例
const [todos, setTodos] = useState([]);

const addItemHandler = (newTodo) => {
  // 使用展开运算符创建新数组，避免修改原状态
  setTodos(prevTodos => [...prevTodos, newTodo]);
};

内容的提问来源于stack exchange，提问作者Biswajit Sharma