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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);

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

Donate - Support to make this site better.
捐助 - 支持我让我做得更好.