如何构建一个 React CRUD 待办事项应用（创建/读取待办事项）
1. 设置初始状态
2. 构建 JSX
3. 添加待办事项功能
4. 完成功能
在本系列教程中，我们将构建一个待办事项应用程序。
首先，我们将介绍构建此应用程序的最基本方法，并随着我们知识的积累进行修改。
我建议你跟着教程一步一步来，如果遇到问题，可以从代码沙箱中 fork 这份代码。
1. 设置初始状态
我们先来创建几个状态值。
import { useState } from "react";
import "./styles.css";
export default function App() {
// need state to keep track of todos
const [todos, setTodos] = useState([]);
// need state to keep track of the value in the input
const [todo, setTodo] = useState("");
return (
<div className="App">
<h1>Todo App</h1>
</div>
);
}
2. 构建 JSX
让我们来构建一下我们希望在屏幕上看到的内容框架。
import { useState } from "react";
import "./styles.css";
export default function App() {
// need a state to keep track of todos
const [todos, setTodos] = useState([]);
// need state to keep track of the value in the input
const [todo, setTodo] = useState("");
return (
<div className="App">
{/* create a form element */}
<form>
{/* create an input element */}
<input
name="todo"
type="text"
placeholder="Create a new todo"
/>
</form>
{/* create a ul to hold all of the list items */}
<ul className="todo-list">
{/* map over the todos array which creates a new li element for every todo */}
{todos.map((todo) => (
<li>{todo}</li>
))}
</ul>
</div>
);
现在屏幕上应该会有一个简单的输入框。
3. 添加待办事项功能
我们将创建两个函数，分别用于添加新的待办事项和跟踪输入值。
import { useState } from "react";
import "./styles.css";
export default function App() {
// need a state to keep track of todos
const [todos, setTodos] = useState([]);
// need state to keep track of the value in the input
const [todo, setTodo] = useState("");
// function to get the value of the input and set the new state
function handleInputChange(e) {
// set the new state value to what's currently in the input box
setTodo(e.target.value);
}
// function to create a new object on form submit
function handleFormSubmit(e) {
// prevent the browser default behavior or refreshing the page on submit
e.preventDefault();
// don't submit if the input is an empty string
if (todo !== "") {
// set the new todos state (the array)
setTodos([
// copy the current values in state
...todos,
{
// setting a basic id to identify the object
id: todos.length + 1,
// set a text property to the value of the todo state and
// trim the whitespace from the input
text: todo.trim()
}
]);
}
// clear out the input box
setTodo("");
}
return (
<div className="App">
{/* create a form element */}
<form>
{/* create an input element */}
<input
name="todo"
type="text"
placeholder="Create a new todo"
/>
</form>
{/* create a ul to hold all of the list items */}
<ul className="todo-list">
{/* map over the todos array which creates a new li element for every todo */}
{todos.map((todo) => (
<li>{todo}</li>
))}
</ul>
</div>
);
4. 完成功能
现在我们需要使用我们刚刚构建的函数来实际实现某些功能。
import { useState } from "react";
import "./styles.css";
export default function App() {
// need a state to keep track of todos
const [todos, setTodos] = useState([]);
// need state to keep track of the value in the input
const [todo, setTodo] = useState("");
// function to get the value of the input and set the new state
function handleInputChange(e) {
// set the new state value to what's currently in the input box
setTodo(e.target.value);
}
// function to create a new object on form submit
function handleFormSubmit(e) {
// prevent the browser default behavior or refreshing the page on submit
e.preventDefault();
// don't submit if the input is an empty string
if (todo !== "") {
// set the new todos state (the array)
setTodos([
// copy the current values in state
...todos,
{
// setting a basic id to identify the object
id: todos.length + 1,
// set a text property to the value of the todo state and
// trim the whitespace from the input
text: todo.trim()
}
]);
}
// clear out the input box
setTodo("");
}
return (
<div className="App">
{/* create a form element and pass the handleFormSubmit function
to the form using the onSubmit prop */}
<form onSubmit={handleFormSubmit}>
{/* create an input element - make sure to add the value prop
with the state value passed in and the onChange prop to update
the state every time something is typed in the input */}
<input
name="todo"
type="text"
placeholder="Create a new todo"
value={todo}
onChange={handleInputChange}
/>
</form>
{/* create a ul to hold all of the list items */}
<ul className="todo-list">
{/* map over the todos array which creates a new li element for every todo
(make sure to add the "key" prop using the unique todo.id value to the li element)
remember this is an array of objects - so we need to access the property
"text" to get the value we want to display */}
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}
现在你应该可以看到待办事项开始添加到页面上了。
这是本系列的第一篇文章。请注意，这只是该应用最基本的功能。我们将在后续文章中添加更多功能。
感谢阅读！
文章来源：https://dev.to/joelynn/build-a-react-crud-todo-app-add-read-todos-1l8a