setState在這個例子中是如何工作的？

我讀通過React Native tutorial和我相當困惑的TextInput部分：setState在這個例子中是如何工作的？

<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})}可以工作，但它不會。

我試過尋找答案並詢問多個人，但我還沒有收到明確的解釋。

來源

2017-06-22 Eric Wiener

this.setstate（）是一個函數。當您在您的構造函數this.state = {foo: bar}中實例化狀態對象時，您正在創建一個對象。所以當你調用this.setState（）時，你正在更新那個對象。所以，你的例子，你可以把它寫這樣的，並有相同的結果：

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

要訪問此，你會this.state.text

來源

2017-06-22 20:47:12

你看到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`!

值必須是一樣的密鑰。

來源

2017-06-22 20:47:51 Li357

此功能是從ES2015（ES6）Property shorthand。

來源

2017-06-22 20:53:14

如果我理解你的問題，你很難理解es6中的一個新功能，叫做object literal property value shorthand。 https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand

來源

2017-06-22 20:55:13

setState在這個例子中是如何工作的？

回答

相關問題