react-组件props

• props 传递数据
• props 传递函数

import React from 'react';
import PropTypes from 'props-types';

class PropsComponent extends React.Component {
    constructor() {
        super()
        this.state = {
            list: [
                {
                    name: '张三',
                    id: 1
                },
                {
                    name: '李四',
                    id: 2
                },
                {
                    name: '王五',
                    id: 3
                }
            ]
        }
    }


    handleSubmitTitle = (val) => {
        console.log(val);
        this.setState({
            list: this.state.list.concat({
                name: val,
                id: `${Date.now()}`
            })
        })
    }

    render() {
        return <div>
            <Input submitTitle={this.handleSubmitTitle} />
            <List list={this.state.list} />
        </div>
    }
}

class Input extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            input: ''
        }
    }

    handleChangeInput = (e) => {
        this.setState({
            input: e.target.value
        })
    }

    handleClickSubmit = () => {
        const { submitTitle } = this.props
        submitTitle(this.state.input)
        this.setState({
            input: ''
        })
    }
    render() {

        return <div>
            <input value={this.state.input} onChange={this.handleChangeInput} />
            <button onClick={this.handleClickSubmit}>提交</button>
        </div>
    }
}




class List extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        const { list } = this.props
        return <ul>
            {
                list.map(item => <li key={item.id}>{item.name}</li>)
            }
        </ul>
    }
}




export const PropsDemo = PropsComponent