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

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

---

我做的不是取消derstand：

我不明白onChangeText={(text) => this.setState({text})}是如何工作的。为什么参数text的名称必须与州text相同？我知道这相当于onChangeText={(text) => this.setState({text: text})}，但我不明白为什么。如果参数刚刚传递给状态变量，那么onChangeText={(txt) => this.setState({text})}可以工作，但它不会。

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

Answer 1

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

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

要访问此，你会this.state.text

Answer 2

你看到shorthand object properties，在ES2015新功能使用。如果属性和价值是相同的，那么你就需要提供价值：

​​3210

是一样的：

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 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