イベントの処理の反応

REACT使用のonClickイベントのために、に注意を払う聞くために同様の文言をこのバインディング問題がリアクト単一のデータ・ストリームの遵守にし、その二つのことに対処するために、結合なし双方向のデータが存在しない、最初の要素は、それ自体に価値が割り当てられ、第二の値であり、そのような入力ボックスなどのイベントの変更後に設定する必要がある値とのonChangeを。
1. SRC - >コンポーネントは、その後、新しいフォルダ CartSample.js次のように、特定のコードを：

import React, { Component } from 'react';

export default class CartSample extends Component {
    //  状态的初始化一般放在构造器中
    constructor(props){
        super(props);
        this.state = {
            text: ''
        }
        // 为了在回调中使用 `this`，这个绑定是必不可少的
        this.textChange = this.textChange.bind(this)
    }
    // 当 input 的值 text 发生变化的时候，我们让 textChang 去切换 input 的值
    textChange (event){
        this.setState({text: event.target.value})
    }
    render() {
        return (
            <div>
                {/* 事件处理 */}
                <div>
                    <input type="text" value={this.state.text} onChange={this.textChange}/> 
                </div>
            </div>
        );
    }
}

注意：

REACT小さなラクダ（キャメルケース）のイベントではなく、純粋な小文字の名前。そして、そうでない場合、彼らは直接実行され、イベント名（）の後に追加することはできません

ない返すことで、偽のデフォルトの動作を防止するための方法を。あなたは明示的に使用しなければならないのpreventDefaultを

2.次に、SRC - > index.jsインポート成分及び基準成分は、結果を表示し、INPUT通常の入力値は問題ではありません。

我々は慎重でなければならないJSXののコールバック関数この、JavaScriptが、中クラスのデフォルトの方法は結合しない、これを。あなたはバインドするのを忘れた場合this.textChangeをし、それが渡されたのonChangeあなたがの関数を呼び出すとき、この値がされて未定義。
あなたが使用していることを感じた場合は、バインドトラブルの多くを、あなたも使用することができます矢印機能を。
レッツ・書込み商品のリストを追加して表示する機能、入力商品の配列のリストへの入力ボックスの付加価値、およびページへの表示リスト、特定のコードを次のように：

import React, { Component } from 'react';
export default class CartSample extends Component {
    //  状态的初始化一般放在构造器中
    constructor(props){
        super(props);
        this.state = {
            text: '',
            goods: []
        }
        this.textChange = this.textChange.bind(this)
    }
    // 当 input 的值 text 发生变化的时候，我们让 textChang 去切换 input 的值
    textChange (event){
        this.setState({text: event.target.value})
    }
    addGoods = () => {
        this.setState(prevstate => {
            // prevstate.goods.push({
            //     id: prevstate.goods.length + 1,
            //     name: prevstate.text
            // })
            // react 官方希望传入与返回的对象不应该是同一个对象
            return {
                goods: [
                    ...prevstate.goods,
                    {
                        id: prevstate.goods.length + 1,
                        name: prevstate.text
                    }
                ]
            }
        })
    }
    render() {
        return (
            <div>
                {/* 事件处理 */}
                <div>
                    <input type="text" value={this.state.text} onChange={this.textChange}/> 
                    <button onClick={this.addGoods}>添加商品</button>
                </div>
                <ul>
                   {this.state.goods.map((good) => <li key={good.id}> {good.name} </li>)}
                </ul>
            </div>
        );
    }
}

解像度：

でaddGoods我々は前に商品を得るために追加する必要があるため、商品の配列、そしてあなたが商品を追加するボタンをクリックしたときに下る財我々は以前の値に依存する必要があるため、この時点で、新しい商品を追加するための配列を、その使用PrevStateを、5月あなたが使用することだと思いプッシュ、そこに上記のコードを、そのようなアプローチは満たすがないのでリアクト、職員の希望リアクト我々が返されるオブジェクトは、このような、この場合のように同じオブジェクト、すべきではない合格を願って、私たちは更新したい商品の配列を必要性は新しい配列ではなく、その前に、我々は、書かれたコードは、配列に追加された新しいアイテムを入れて、前にミックスに追加の配列を必要とする値にする必要があります。

おすすめ