。
import React from "reaction";
export default function Form （{handleSubmit, handleChange, value}）{
return (
<form onSubmit = {handleSubmit}> /span>
<label>
< input type="text" name="name" onChange = {handleChange}/>
</label>
< input type="submit" value="submit" />
</form>/span>
);
}我正在嘗試創建一個基本的ToDoList應用程式。我在將用戶的輸入渲染到我的ToDoList組件的部分遇到了困難。當我提醒e.target.value的值時，我得到了未定義。這到底是什么問題？ EDIT: 添加了我的表單組件。
。import "./styles.css"/span>;
import Header from "./Header.js"/span>;
import Form from "./Form.js"/span>;
import {useState}. from "react"。
import ToDoList from "./ToDoList.js"/span>
export default function App（）{
const[items, setItems] = useState([] )。
let value = "";
function handleChange（e） {
value = e.target.value。
}
function handleSubmit（e） {
setItems([... items,
e.target.value。
]);
alert('A name was submitted: ' e.target.value) 。
e.preventDefault（）。
}
return (
<div className="App"/span>>
<div>/span>
<Header/>>
</Div>/span>
<div>/span>
< Form handleChange = {handleChange} handleSubmit = {handleSubmit} value = {value}/>
</div>
<div>/span>
<ToDoList items = {items}/>
</div>/span>
</div>/span>
);
}uj5u.com熱心網友回復：
因為你把整個表單作為事件傳遞給handleSubmit和items。如果你想保持這種風格的代碼，你必須使用輸入值的變化。此外，你必須在做任何事情之前定義e.preventDefault()。所以：
import "./styles.css"/span>。
import Header from "./Header.js"/span>。
import Form from "./Form.js"/span>;
import {useState}. from "react"。
import ToDoList from "./ToDoList.js"/span>
export default function App（）{
const[inputValue, setInputValue] = useState（）。
const[items, setItems] = useState([] )。
let value = "";
function handleChange（e） {
setInputValue(e.target.value) 。
}
function handleSubmit（e）{
e.preventDefault（）。
setItems([... items,
輸入值
]);
setInputValue(""/span>)。
alert('A name was submitted: ' e.target.value) 。
}
return (
<div className="App"/span>>
<div>/span>
<Header/>>
</Div>/span>
<div>/span>
< Form handleChange={handleChange} handleSubmit={handleSubmit} value = {value}/>
</div>
<div>/span>
<ToDoList items = {items}/>
</div>/span>
</div>/span>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/321621.html
標籤：