React组件通信

组件通信

1. 父组件向子组件传 值/对象/数组，子组件可以通过props获取
2. 父组件向子组件传函数，子组件可以通过props调用

import React from 'react'
class Input extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            title:''
        }
    }

    render() {
        return <>
            <input value={this.state.title} onChange={this.changeHandler}/>
            <button onClick={this.onSubmit}>提交</button>
        </>
    }

    changeHandler = (e) =>{
       this.setState({
           title: e.target.value
       })
    }

    onSubmit = () =>{
        this.props.submitTitle(this.state.title)
        this.setState({
            title:''
        })
    }
}

class List extends React.Component{
    constructor(props) {
        super(props);
    }
    render() {
        return (<ul>
            {this.props.list.map((item,index) =>{
                return <li key={index}>{item.title}</li>
            })}
        </ul>)
    }

}

class Basics04 extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            list:[
                {
                  title:'xxx'
                }
            ]
        }
    }

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

    onSubmitTitle = (title) =>{
        this.setState({
            list:this.state.list.concat([{title}])
        })
    }
}


export default Basics04