Question

我正在阅读React Native tutorial，我对TextInput部分感到相当困惑：

<TextInput
    style={{height: 40}} 
    placeholder="Type here to translate!"
    onChangeText={(text) => this.setState({text})}
/>

我的理解：

我意识到onChangeText={(txt) => this.setState({text: txt})}有效并且对我有意义，因为参数正在应用于状态text

我不明白的事情：

我不明白onChangeText={(text) => this.setState({text})}是如何运作的。为什么参数text必须与州text命名相同？我知道它等同于onChangeText={(text) => this.setState({text: text})}，但我不明白为什么。如果参数刚刚传递给状态变量，那么onChangeText={(txt) => this.setState({text})}将起作用，但事实并非如此。

我尝试寻找答案并询问了多个人，但我还没有收到明确的解释。

Answer 1

您将看到shorthand object properties，这是ES2015中的新功能。如果属性和值相同，则无需提供值：

const obj = {
  foo
};

与：

相同

const obj = {
  foo: foo
};

所以在这种情况下，它等同于（和desugars）：

(text) => this.setState({ text: text })

尝试时不起作用的原因：

(txt) => this.setState({ text })

因为在第一个例子text中，属性的值引用了箭头函数的参数：

(text) => this.setState({ text: text })
//                              ^^^^ refers to the argument `text`

在第二个代码段中，text是值，但没有text变量，因为您将参数更改为txt，因此它不起作用：

(txt) => this.setState({ text: text })
//                              ^^^^ refers to the argument `text` but it doesn't exist, it is called `txt`!

该值必须与密钥相同。

Answer 2

this.setstate（）是一个函数。在构造函数this.state = {foo: bar}中实例化状态对象时，您正在创建一个对象。因此，当您调用this.setState（）时，您正在更新该对象。所以你的例子你可以这样写，并得到相同的结果：

onChangeText={(txt) => this.setState({text: txt})}

要访问此内容，您可以使用this.state.text

Answer 3

此功能来自ES2015（ES6）Property shorthand。

Answer 4

如果我理解你的问题，那么你很难理解的是es6中的一个名为object literal property value shorthand的新功能。 https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand

在这个例子中，setState如何工作？

4 个答案: