前端学习笔记 React (5) 数据的反向传递 callback

React 数据的绑定是单方向的, 只能基于 props 向下传递, 或者使用 state 进行保存.

如果需要从子模块向上层模块传递数据, 需要指定回调方法.

上层定义好方法, 并且通过 JSX 传递下去, 子模块使用 props.xYyZz 调用该方法.

addComment(author, comment) {
	// send ajax to server.
	// on success 中返回 commentId

	this.setState({
	  data: this.state.data.concat({
	  	commentId,
	    author,
	    date: '刚刚',
	    text: comment
	  });
	});
}

<CommentForm addComment={this.addComment.bind(this)}/>

Ps, 注意 bind 的使用.

调用上层通过 jsx 参数传入的方法.

1	this.props.addComment(author, comment);

这样就可以将子模块中的数据传入上层.