前端基础之《React（13）—表单绑定、列表渲染》

一、表单绑定

1、表单取值的标准写法

表单的值在event.target.value

说明：

（1）event‌：事件对象，包含有关事件的详细信息

（2）target‌：触发该事件的DOM元素

（3）value‌：该DOM元素的value属性值

二、列表渲染

1、由列表数据，变成可以渲染的数组

{id: 1, task: '吃饭'}, {id: 2, task: '读书'}

变成

\\{id}\\{task}\\, \\{id}\\{task}\\

2、用map方法转换

const newList = list.map(callback)

三、例子

import { Component } from 'react';

class A extends Component {
    constructor (props) {
        super(props);
        this.state = {
            todo: '',
            list: [],
        };
    };

    getTodo (ev) {
        //console.log('---change', ev.target.value);
        this.setState({ todo: ev.target.value });
    }

    confirm () {
        // 向列表中添加todo
        console.log('---todo', this.state.todo);
        this.setState(state=>({
            // list是旧的数组展开，和新的对象合并
            list: [...state.list, {id: Date.now(), task: state.todo}],
            todo: '',
        }), ()=>{
            console.log('---new list', this.state.list);
        });
    }

    render () {
        const handler = (ev) => this.getTodo(ev); // 事件处理器
        const { todo, list } = this.state;

        return (
            <div>
                <div>
                    <input type="text" value={ todo } onChange={ handler } />
                    <button onClick={()=>this.confirm()}>添加</button>
                </div>
                <div>
                    列表
                    { list.map(item=>(
                        <div key={item.id}>
                            <span>{item.id}</span>
                            -
                            <span>{item.task}</span>
                        </div>
                    ))}
                </div>
            </div>
        );
    }
}

export default A;