React 父子组件之间数据传递 实用 - lbx

父组件通过属性的方式向子组件传值，子组件通过函数回调的方式向父组件传值。

一、父组件向子组件传值

案例一：
父组件：

<PageTitle title="测试页面标题" />

子组件：

<div>{this.props.title}</div>

注：父组件中的 title 和子组件中的 this.props.title 对应，props表示接收从父组件传过来的值。

案例二：
父组件：

<List list={this.state.list} />

子组件：

render() {
        let listBody = this.props.list.map((item, index) => {
            return (
                <div className="item" key={index}>
                    <a href="JavaScript:;">{item.title}</a>
                </div>
            );
        });
        return (
            <div className="box">
                {listBody}
            </div>
        );
    }
}

二、子组件向父组件传值

案例一：
父组件：

//接收从子组件传回来的值
onClickGetItem(item) {
	console.log(item);
}
render() {
        return (
            <div>
                <List list={this.state.list} onPropsClickHandle = {(item) => this.onClickGetItem(item)}/>
            </div>
        );
    }

子组件：

render() {
        let listBody = this.props.list.map((item, index) => {
            return (
                <div className="item" key={index}>
                    <a href="JavaScript:;" onClick={() => {this.props.onPropsClickHandle(item)}}>{item.title}</a>
                </div>
            );
        });
        return (
            <div className="box">
                {listBody}
            </div>
        );
    }

说明：子组件中使用 this.props.onPropsClickHandle 调用父组件的方法，并把参数传到父组件，其中onPropsClickHandle与父组件中绑定的方法对应，onClickGetItem 为父组件接收参数的方法。

案例二：
父组件：

//接收从子组件传回来的值
onGetInputValue(item) {
	console.log(item);
}
render() {
        return (
            <div>
				<Search onPropsChangeHandle={this.onGetInputValue.bind(this)}/>
            </div>
        );
    }

子组件：

return (
	           <div className="box">
	               关键字：
	               <input onChange={(e) => {this.props.onPropsChangeHandle(e.target.value)}} />
	           </div>
		 );

说明：子组件中使用 this.props.onPropsChangeHandle 调用父组件的方法，并把参数传到父组件，其中onPropsChangeHandle 与父组件中绑定的方法对应，onGetInputValue 为父组件接收参数的方法。