React学习手册

122

｜

第

6

章

绑定

'this'

作用域

当用户使用

React.createClass

创建组件时，不需要将

this

作用域和用户的组件

方法绑定。

React.createClass

会自动为用户完成这些工作。

翻转数据流

在警告对话框中回传表单中输入的数据是一个不错的想法，但是这样一款产品并不能

带来实际的经济价值。我们需要从用户那里收集数据，然后将这些数据发送到某处进

行加工。这意味着任何收集到数据最终都会被发送到服务端，与之有关的细节我们将

会在第

12

章深入展开。

首先，我们需要从表单组件中收集数据，并且可以传递它们。

一个常用的从

React

组件中收集数据的方案是翻转数据流。

注

2

有时人们也称这种方法

为双向数据绑定。它通过将一个回调函数作为属性传递给组件，使得组件能够通过属

性访问回传数据。之所以称为翻转数据流是因为我们将组件函数当作一个属性进行传

递的，并且组件将回传数据当作了函数参数。

假如我们采用了颜色表单，但是目前用户提交的新颜色，即我们希望收集的信息要求

在控制台中输出。

我们可以创建一个名为

logColor

的函数，并将标题和颜色作为函数参数。这些参数的

值可以被输出到控制台上。当我们使用

AddColorForm

时，我们可以简单地添加一个名

为

onNewColor

的属性，并将它与

logColor

函数关联。当用户添加新颜色时，

logColor

被触发执行了，然后我们可以将该函数作为属性传递：

const logColor = (title, color) =>

console.log(`New Color: ...