如何使用功能组件制作待办事项列表？

Question

我正在使每个组件都是一个元素（按钮，整个列表，单个元素......）我无法弄清楚如何让我的列表打印在表单下方。 任务显示在 console.log() 中，但我似乎无法传输正确的数据。

提前感谢您的帮助

这是 items.jsx 代码

import React, { useState} from 'react'
import './todo.css'
import  List from './list'
import Button from './button';

function Items () {
    const [tasks, setTasks] = useState([]);
    const [value, setvalue] = useState("");

    /*  const onChange = (e) => {
        setvalue(e.target.value)
        // console.log('type')
   } */ 

    const onAddTask = (e) =>{
         e.preventDefault();
        console.log('submit')

        const obj = {
            name: value ,
            id: Date.now(),
        };
        if (value !== "") {
            setTasks(tasks.concat(obj));
            setvalue("")
            console.log(obj)
        }
    };
   
    return(
        <div className="form">
            <header>Your todo list</header>
            <input 
                    placeholder="type your task"
                    value={value}
                    onChange={(e) => setvalue(e.target.value)}/>
            <input type="date" placeholder='Set your date!'/>
        <button onClick={onAddTask}>Submit task</button>
        <List data = {List}/>
        </div>
    )
}

export default Items

这是 list.jsx 代码

import React , { useState } from "react";
import  "./Items"
import Button from "./button"

const List = (tasks) => {
    return(
        
        <div>
            {tasks.map}
            
        </div>

    )
    console.log(task.map)
}
export default List

Answer 1

步骤1

这是一个功能齐全的演示，可帮助您入门 -

 function Todo() { const [items, setItems] = React.useState([]) const [value, setValue] = React.useState("") const addItem = event => setItems([...items, { id: Date.now(), value, done: false }]) return <div> <List items={items} /> <input value={value} onChange={e => setValue(e.target.value)} /> <button type="button" onClick={addItem}>Add</button> </div> } function List({ items = [] }) { return <ul> {items.map(item => <ListItem key={item.id} item={item} /> )} </ul> } function ListItem({ item = {} }) { return <li>{item.value}</li> } ReactDOM.render(<Todo />, document.body)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>

从好的 state 开始

请注意，使用数组存储项目对于您需要执行的各种操作来说效率较低。 考虑改用 Map。 再次运行演示并单击列表项以切换其 state -

 const update = (m, key, func) => new Map(m).set(key, func(m.get(key))) function Todo() { const [items, setItems] = React.useState(new Map) const [value, setValue] = React.useState("") const addItem = event => { const id = Date.now() setItems(update(items, id, _ => ({ id, value, done: false }))) } const toggleItem = id => event => setItems(update(items, id, item => ({...item, done: .item.done }))) return <div> <List items={items} onClick={toggleItem} /> <input value={value} onChange={e => setValue(e.target,value)} /> <button type="button" onClick={addItem}>Add</button> </div> } function List({ items = new Map. onClick }) { return <ul> {Array.from(items,values(). item => <ListItem key={item.id} item={item} onClick={onClick(item,id)} /> )} </ul> } function ListItem({ item = {}. onClick }) { return <li onClick={onClick}> { item?done. <s>{item:value}</s>. item.value } </li> } ReactDOM,render(<Todo />. document.body)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>

事半功倍

函数式编程在 React 中有很长的路要走。 使用curried update function 我们可以利用 React 的功能更新-

const update = (key, func) => m =>          // <-
  new Map(m).set(key, func(m.get(key)))

function Todo() {
  // ...

  const addItem = event => {
    const id = Date.now()
    setItems(update(id, _ => ({ id, value, done: false }))) // <-
  }
  const toggleItem = id => event =>
    setItems(update(id, item => ({ ...item, done: !item.done }))) // <-
  
  // ...
}

但不要停在那里

避免手动创建待办事项数据{ id: ..., value: ..., done: ... } 。 相反，让我们创建一个不可变的TodoItem class 来表示我们的数据。 class 还为我们提供了一个适当的容器，用于存放将在我们的新数据类型上运行的函数 -

class TodoItem {
  constructor(id = 0, value = "", done = false) {
    this.id = id
    this.value = value
    this.done = done
  }
  toggle() {
    return new TodoItem(id, value, !this.done) // <- *new* data
  }
}

现在我们的Todo组件的意图是明确无误的 -

function Todo() {
  // ...
  const [items, setItems] = useState(new Map)

  const addItem = event => {
    const id = Date.now()
    setItems(update(id, _ => new TodoItem(id, value))) // <- new TodoItem
  }
  const toggleItem = id => event =>
    setItems(update(id, item => item.toggle())) // <- item.toggle
  
  // ...
}