この例ではsetStateはどのように機能しますか？

Question

私はReact Native tutorial上で読んでいると私はTextInputセクションについてかなり困惑している：私は以来、onChangeText={(txt) => this.setState({text: txt})}作品、それは私には理にかなっていることを実感

：

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

私は理解してどのようなパラメータは、私がいないいないものの状態にtext

---

を適用されていますお問い合わせ：

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（）を呼び出すと、そのオブジェクトが更新されます。あなたがshorthand object properties、ES2015の新機能を見ているthis.state.text

Answer 2

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

これをアクセスするには、あなたが使用します。だからあなたの例では、あなたはこのようにそれを書いて、同じ結果を持つことができます。プロパティと値が同じである場合は、値を提供する必要はありません。

​​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の新機能です。 https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand