使用React实现一个待办事项列表｜青训营构建事项列表使用 Material Design 展示事项列表通过 inp

构建事项列表

使用 Material Design 展示事项列表
通过 input 添加事项
删除事项

配置

启动工程

npm start

这个应用应该跑在localhost:3000上

ToDoForm 组件

添加一个新文件，src/TodoForm.js。这是初始代码：

import React from 'react';
import TextField from '@material-ui/core/TextField';
const TodoForm = ({ saveTodo }) => {
  return (
    <form>
      <TextField
        variant="outlined"
        placeholder="Add todo"
        margin="normal"
      />
    </form>
  );
};
export default TodoForm;

通过组件名字，就知道它是用来添加事项的，它也就是第一个钩子。

useState

import { useState } from 'react';
const [value, setValue] = useState('');

useState是一个接收初始状态(state)返回一个数组的函数。数组的第一个值是你的 state 现在的值，第二个值是 state 的更新方法。

所以把它们叫做value和setValue, 并使用 es6 解构赋值对它们进行赋值。

对表单(Form)使用 useState

表单应该跟踪 input 的值并在保存提交时执行saveTodo方法。useState能实现它。

更新updateForm.js，这是更新之后的代码：

import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField';
const TodoForm = ({ saveTodo }) => {
  <b>const [value, setValue] = useState('');</b>
  return (
    <form
        <strong>onSubmit={event => {</strong>
        event.preventDefault();
        saveTodo(value);
      }}

    >
      <TextField
        variant="outlined"
        placeholder="Add todo"
        margin="normal"
        onChange={event => {
          setValue(event.target.value);
        }}
        value={value}
      />
    </form>
  );
};
export default TodoForm;

回到index.js，引入并且使用这个组件。

...
import TodoForm from './TodoForm';
...
const App = () => {
  return (
    <div className="App">
    <Typography component="h1" variant="h2">
      Todos
    </Typography>
    <TodoForm saveTodo={console.warn} />
   </div>
  );
};

现在 input 输入的值已经可以被打印出来了

对事项列表(todos)使用 useState

我们的事项列表 todos 也需要 state。在index.js中引入useState。初始 state 应该是空数组。

import React, { useState } from 'react';
...
const App = () => {
  const [todos, setTodos] = useState([]);
  return ...

TodoList 组件

建立一个新文件:src/TodoList.js

大部分代码是来自 Material-UI 库的高级组件，这是更新之后的代码：

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';

const TodoList = ({ todos, deleteTodo }) => (
  <List>
    {todos.map((todo, index) => (
      <ListItem key={index.toString()} dense button>
        <Checkbox tabIndex={-1} disableRipple />
        <ListItemText primary={todo} />
        <ListItemSecondaryAction>
          <IconButton
            aria-label="Delete"
            onClick={() => {
              deleteTodo(index);
            }}
          >
            <DeleteIcon />
          </IconButton>
        </ListItemSecondaryAction>
      </ListItem>
    ))}
  </List>
);

export default TodoList;

它接收两个属性：

todos：事项数组，我们遍历数组，建立每一个事项
deleteTodo：点击一个事项的删除按钮触发这个方法，它接收一个参数：索引，这个索引唯一标识每一个事项。

在index.js中引入这个组件。

...
import TodoList from './TodoList';
import './styles.css';
const App = () => { ...

并在App方法中使用它：

...
<TodoForm saveTodo={console.warn} />
<TodoList todos={todos} />

添加事项

还是在index.js中，编辑TodoForm的属性， saveTodo：

<TodoForm
  saveTodo={todoText => {
    const trimmedText = todoText.trim();
    if (trimmedText.length > 0) {
      setTodos([...todos, trimmedText]);
    }
  }}
/>

这里我们只是把空格去掉，把新的值添加到todos中。

清除 input 框

现在添加新的事项后，我们没有把 input 清空，我们只需要在TodoForm.js中做一点小改动，就可以修复它。

<form
  onSubmit={event => {
    event.preventDefault();
    saveTodo(value);
    setValue('');
  }}
>

当事项被保存后，我们就把 form 的 state 变成空字符串。

删除事项

TodoList为每一条事项都提供了索引，根据索引我们能找到我们想删除的事项。

// TodoList.js
<IconButton
  aria-label="Delete"
  onClick={() => {
    deleteTodo(index);
  }}
>
  <DeleteIcon />
</IconButton>

在index.js中传递这个函数

<TodoList
  todos={todos}
  deleteTodo={todoIndex => {
    const newTodos = todos
      .filter((_, index) => index !== todoIndex);

    setTodos(newTodos);
  }}
/>

我们使用setTodos方法把所有不符合index的事项保存下来。

删除功能完成！

动图封面

抽取事项列表(todos)的 useState

钩子便于分离状态和组件的逻辑。所以我们在这个应用中可以这样做。

新建一个文件叫src/useTodoState.js

import { useState } from 'react';

export default initialValue => {
  const [todos, setTodos] = useState(initialValue);

  return {
    todos,
    addTodo: todoText => {
      setTodos([...todos, todoText]);
    },
    deleteTodo: todoIndex => {
      const newTodos = todos
        .filter((_, index) => index !== todoIndex);

      setTodos(newTodos);
    }
  };
};

这就是index.js中原来的代码现在我们只需要引入它，这是更新之后的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import Typography from '@material-ui/core/Typography';
import TodoForm from './TodoForm';
import TodoList from './TodoList';
import useTodoState from './useTodoState';
import './styles.css';

const App = () => {
  const { todos, addTodo, deleteTodo } = useTodoState([]);

  return (
    <div className="App">
      <Typography component="h1" variant="h2">
        Todos
      </Typography>

      <TodoForm
        saveTodo={todoText => {
          const trimmedText = todoText.trim();

          if (trimmedText.length > 0) {
            addTodo(trimmedText);
          }
        }}
      />

      <TodoList todos={todos} deleteTodo={deleteTodo} />
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

动图封面

抽取表单 input 中的 useState

我们可以对表单做同样的处理！新建一个文件：src/useInputState.js

import { useState } from 'react';

export default initialValue => {
  const [value, setValue] = useState(initialValue);

  return {
    value,
    onChange: event => {
      setValue(event.target.value);
    },
    reset: () => setValue('')
  };
};

现在todoForm.js应该变成这样：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import useInputState from './useInputState';

const TodoForm = ({ saveTodo }) => {
  const { value, reset, onChange } = useInputState('');

  return (
    <form
      onSubmit={event => {
        event.preventDefault();

        saveTodo(value);
        reset();
      }}
    >
      <TextField
        variant="outlined"
        placeholder="Add todo"
        margin="normal"
        onChange={onChange}
        value={value}
      />
    </form>
  );
};

export default TodoForm;