从零开始学习React——(十一)：React父子组件传值以及子组件调用父组件方法

本节将介绍React中父子组件如何传值的方法。

1. 父组件向子组件传值

目前最简单，最实用，最容易上手的方法。就是实用组件属性的形式父组件给子组件传值。例如：在ChildItem组件中加入content属性，然后给属性传递{item}，这样就可以父组件向子组件传值。

	<ChildItem content = {item} />

此时，父组件值已经传递给子组件，子组件这时候可以使用this.props.xxx的形式接收，比如传递过来的值，可以使用如下代码进行接收。

	import React, { Component } from 'react'
	class ChildItem extends Component {
		render() {
			<div>{this.props.content}</div>
		}
	}
	export default ChildItem

父组件向子组件传值：是通过在父组件添加属性，在子组件通过this.props.xxx的形式传值。

2. 子组件向父组件传递数据

现在的需求是这样的：点击组件中的菜单项后，删除该菜单项。根据前面的组件拆分，此时菜单项和父组件已不在一个组件内。所以此处就涉及了一个子组件向父组件传递数据的知识。

1. 先绑定事件，此时需要在ChildItem组件中绑定。如下：

import React, { Component } from 'react'
	class ChildItem extends Component {
		render() {
			<div onClick = {this.props.hangleClick.bind(this)}>{this.props.content}</div>
		}
		handleClick() {
			console.log('test')
		}
	}
	export default ChildItem

此时打开控制台再点击菜单项，就会打印出console。不过这时候会报warning警告，大致意思是循环时必须设置key值。
此时修改添加key值。在Child.js组件内修改render代码。 如下：

	// 省略上面部分代码...
	<ul>
		{
			this.state.list.map((item, index) => {
				return (
					<Child 
							key = {item + index}
							content = {item}>
					</Child>
				)
			})
		}
	</ul>
	// 省略下面部分代码...

绑定成功后，就需要通过操作子组件删除父组件里的数据了。但是React里明确规定，子组件不能操作父组件的数据。所以需要借助一个父组件方法，来修改父组件的内容。之前Child.js组件内有一个删除方法delItem，现在子组件就借用这个方法。

	delItem(index) {
		let list = this.state.list
		list.splice(index, 1)
		this.setState({
			list: list
		})
	}

获取数组索引下标

需要删除菜单某一项，就必须知道该项的索引值，还是要通过父组件传递给子组件, 所以还是通过props属性进行传递

	<ul>
		{
			this.state.list.map((item, index) => {
				return (
					<Child 
						key = {item + index}
						content = {item}
						index = {index} />
				)
			})
		}
	</ul>

然后修改ChildItem.js组件，在handleClick方法内，写下面代码

	handleClick() {
		console.log(this.props.index)
	}

此时打开浏览器点击菜单项，看是否能正确console出index，如果报错，可能会是未绑定this。可以在ChildItem.js采用如下方式

	return (
		<div onClick = {this.handleClick.bind(this)}>
			{this.props.content}
		</div>
	)

当然绑定this的方式有很多种。感兴趣的可以去看看之前的 绑定this的4种方式。在页面最底部。也写出了几种方式的优缺点。

子组件调用父组件方法

如果子组件要调用父组件方法，其实和传递数据差不多，只需要在调用组件时，把方法传递给子组件就可以了。记得传递的时候也需要绑定this，不然子组件没办法找到这个父组件。

	<ul>
		{
			this.state.list.map((item, index) => {
				return (
					<Child
						key = {item + item}
						content = {item}
						index = {index}
						// 关键代码 start
						delItem = {this.delItem.bind(this)}
						// 关键代码 end
				)
			})
		}
	</ul>

传递后，在子组件直接调用就好了。代码如下：

	handleClick() {
		this.props.delItem(this.props.inedx)
	}

至此，React中父子传值就结束了。本节比较重要。建议反复多练习几遍。