使用功能组件提升状态

如何解决使用功能组件提升状态

我正在尝试将 AddTodo.js 中的输入状态提升到我的 App.js。

我收到下一个错误：“TypeError：无法读取未定义的属性 'preventDefault'”。

我尝试了很多变体，但在网上查看只会让我更加困惑（我确实设法从子函数调用父函数，但我似乎无法将输入数据传递给 onAddHandler）

感谢帮助！

App.js：

import React,{ useState } from "react";
import Header from "./UI/Header";
import TodoList from "./Components/TodoList";
import AddTodo from "./Components/AddTodo";

function App(props) {
  const [todo,setTodo] = useState([]);

  const onAddHandler = (input,e) => {
    e.preventDefault();
    setTodo([
      ...todo,{
        name: input,},]);
    console.log(input);
  };

  return (
    <div>
      <div className="App">
        <AddTodo onAddHandler={onAddHandler} />
        <Header />
        <TodoList />
      </div>
    </div>
  );
}

export default App;

AddTodo.js :

import React,{ useState } from "react";

const AddUser = ({ onAddHandler }) => {
  const [input,setInput] = useState("");

  const inputChangeHandler = (e) => {
    setInput(e.target.value);
  };

  return (
    <div>
      <form onSubmit={onAddHandler(input)}>
        <input id="todoname" type="text" onChange={inputChangeHandler}></input>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default AddUser;

解决方法

您应该为按钮提交添加对 onClick 事件的回调：

import React,{ useState } from "react";

const AddUser = ({ onAddHandler }) => {
  const [input,setInput] = useState("");

  const inputChangeHandler = (e) => {
    setInput(e.target.value);
  };

  return (
    <div>
      <form onSubmit={onAddHandler(input)}>
        <input id="todoname" type="text" onChange={inputChangeHandler}></input> //change this line
        <button type="submit" onClick={(e) => onAddHandler(input,e)}>Submit</button>
      </form>
    </div>
  );
};