React中子父组件通信方式（一）：自定义事件

React中，父组件传值子组件可利用props，子组件传值父组件利用自定义事件。

案例：
父组件传list到子组件，点击遍历后的每一条数据，子组件利用props调用父组件的chooise()方法将结果传到父组件中，最后赋值result

// 父组件
class App extends React.Component {
	constructor(){
		super();
		this.state = {
			list:['苹果','香蕉','鸭梨'],
			result:''
		}
	}
	chooise(item){
		this.setState({
			result:item
		})
	}
	render(){
		return(
			<div>
				//通过标签传值到子组件Bar
				<Bar chooise={this.chooise.bind(this)} list={this.state.list} /> 
				<p>当前选择的结果是：{this.state.result}</p>
			</div>
		)
	}
}

// 子组件
class Bar extends React.Component {
	handleClick(item){
		this.props.chooise(item)
	}
	render(){
		return(
			<div>
				<ul>
					{
						this.props.list.map((item,index) => 
							<li onClick={this.handleClick.bind(this,item)} key={index}>{item}</li>
						)
					}
				</ul>
			</div>
		)
	}
}

//渲染
ReactDOM.render(
	<App />,
	document.getElementById('app')
)