React—todolist

React—todolist

父组件

import React from 'react';
import ReactDom from 'react-dom';
import Header from './component/header'
import List from './component/list'
let arr = []; // 定义一个空数组用来储存每次输入的内容
class ToDoList extends React.Component {
    constructor () {
        super ();
        this.state = {
            msg: '' // 定义一个空变量，用来储存输入的内容
        }
    }
    // 以下三个方法都父组件定义，在子组件中调用
    handleChange (e) { // input框输入内容更新msg
        this.setState ({
            msg: e.target.value
        })

    }
    handleClick () { // 点击确认发送
        if (this.state.msg != '') { // 如果输入框内容不为空
            arr.push(this.state.msg); // 数组添加输入框的内容
            this.setState ({ // 清空输入框
                msg: ''
            })
        }
    }
    handleKeyDown (e) { // 回车发送
        if (e.keyCode == 13) { // 如果keycode是13证明是回车键
            this.handleClick() // 直接调用点击确认发送的方法
        }
    }
    render () {
        return (
            <div>
                {/*
                    msg={this.state.msg}给子组件传值
                    handleChange={this.handleChange.bind(this)}
                    handleClick={this.handleClick.bind(this)}
                    handleKeyDown={this.handleKeyDown.bind(this)}
                    给子组件传方法
                */}
                <Header
                    msg={this.state.msg}
                    handleChange={this.handleChange.bind(this)}
                    handleClick={this.handleClick.bind(this)}
                    handleKeyDown={this.handleKeyDown.bind(this)}
                />
                {/*给List子组件传arr数组的值*/}
                <List arr={arr}/>
            </div>
        )
    }
}

ReactDom.render(
    <ToDoList />,
    document.getElementById('root')
);

子组件（header）

import React, {Component} from 'react';
export default class Header extends Component {
    render () {
        return (
            <div>
                {/*
                    value={this.props.msg}子组件中input的value值是获取父组件传过来的msg值
                    onKeyDown={this.props.handleKeyDown}子组件按键时触发父组件定义的handleKeyDown方法
                    onChange={this.props.handleChange}子组件的input输入框发生变化时触发父组件定义的handleChange方法
                */}
                <input
                    type="text"
                    value={this.props.msg}
                    onKeyDown={this.props.handleKeyDown}
                    onChange={this.props.handleChange}
                />
                {/*子组件点击按钮触发父组件的handleClick方法*/}
                <button onClick={this.props.handleClick}>发送</button>
            </div>
        )
    }
}

子组件（list）

import React, {Component} from 'react';
export default class List extends Component {
    render () {
        // this.props.arr是子组件获取的父组件传过来的数组
        // 然后利用map循环数组创建li
        const listItems = this.props.arr.map((item, i) =>
            <li key={i}>{item}</li>
        )
        return (
            <div>
                <ul>
                    {listItems}
                </ul>
            </div>
        )
    }
}

效果：