05-表单绑定，列表渲染

一，表单绑定，列表渲染

关于表单绑定和列表渲染，我们集成到todolist中讲解。

1，类组件实现todolist

把表单变成受控表单，收集表单中的数据，如下：

此时，我们就可以收集表单的数据，如下：

在React中，收集数据，需要写一个value，还需要写一个onInput，如果不写onInput，会后错，如下：

根据人家建议，换成onChange，如下：

当点击添加按钮，就需要把收集到的todo存起来，如下：

把每一个todo存储到数组中，如下：

浏览器测试如下：

添加完数据，需要把数据清空，如下：

测试如下：

需要把list中的数据渲染出来：

我们把数据一片html代码，浏览器渲染出来，在vue中通过v-for，在react中，渲染数据，99%都通过map方法，

map方法可以对数据进行加工，代码如下：

浏览器测试如下：

刚才是点击按钮实现添加，现在想按回车键实现添加，如下 ：

实现对应的方法，如下：

浏览器测试如下：

我要实现删除功能，如下：

浏览器测试效果如下：

实现对应的删除方法，如下：

测试OK，如下：

总结：

• 受控表单：一个表单的value或checked由state来决定，通过控制state就可以修改表单数据，这样的表单叫受控表单。
• 受控组件：一个组件的自定义属性由状态来控制，只有这个状态发生变化，组件才能更新。后面讲。
• 列表渲染：在React中，通过map方法实现。因为map方法，可以对数据进行加工，返回新的数据（jsx）;

2，函数组件实现todolist

直接上代码如下：

import { useState } from "react"

function DemoA() {
    let [todo, setTodo] = useState("")
    let [list, setList] = useState([])
    let confirm = () => {
        if (!todo.trim()) return;
        setList([...list, { id: Date.now(), task: todo }])
        setTodo("")
    }
    let delTodo = (id) => {
        setList(list.filter(ele => ele.id != id))
    }
    let addByEnter = e => {
        if (e.keyCode === 13) {
            confirm();
        }
    }
    return (
        <div>
            <div>
                <input type="text" value={todo}
                    onChange={e => setTodo(e.target.value)}
                    onKeyUp={e => addByEnter(e)}
                />
                <button onClick={confirm}>添加</button>
                <hr />
                <div>
                    {
                        list.map(item => (
                            <div key={item.id}>
                                <span>{item.id}</span>
                                <span>--</span>
                                <span>{item.task}</span>
                                <button onClick={() => delTodo(item.id)}>X</button>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}

export default DemoA;

作业：

todlist打完，部署，上线，发连接到群里，必须的。

jsx元素本质是一个对象，是React.createElement调用的返回值，这个返回值是一个对象，JSX对象可以叫做”fiber单元"，很多很多的嵌套的”fiber单元"就会构成”fiber树"。