问题描述
我正在尝试将 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>
);
};