1

編集: 私の間違いです。ビルドを実行するたびに、何らかの理由で webpack ホットローダーが古い js をキャッシュしていました。リセットして再構築し、現在は機能しているようです。

yahoo Fluxible React アプリで es6 スタイル クラス宣言を使用して単純な検索ボックスを作成しようとしています。todo の例に取り組んでいて、それを es6 スタイルの構文に変換していますthis.setStateが、_onChangeメソッドでエラーが発生しています。コンストラクターで関数を「this」にバインドしましたが、まだエラーが発生しています。

import React from 'react';
import searchProducts from '../actions/searchProducts';

const ENTER_KEY_CODE = 13;

class SearchBox extends React.Component {

    static contextTypes = {
        executeAction: React.PropTypes.func.isRequired
    };

    static propTypes = {
        text: React.PropTypes.string
    };

    static defaultProps = {
        text:''
    };

    constructor(props) {
        super(props);
        this.state = {
            text: props.text
        };
        this._onChange = this._onChange.bind(this);
        this._onKeyDown = this._onKeyDown.bind(this);
    }

    render() {
        return (
            <input
                className="search-box"
                name="search-keyword"
                value={this.state.text}
                onChange={this._onChange}
                onKeyDown={this._onKeyDown}
            />
        );
    }

    _onChange(event, value) {
        console.log( event.target.value);

        //error is here///////////////////////////////////////////////////
        this.setState({text: event.target.value}); 
    }

    _onKeyDown(event) {
        if (event.keyCode === ENTER_KEY_CODE) {
            event.preventDefault();
            event.stopPropagation();

            var text = this.state.text.trim();
            if (text) {
                this.context.executeAction(searchProducts, {
                    text: text
                });
            }
            this.setState({text: ''});
        }
    }

}


export default SearchBox;
4

2 に答える 2

0

編集：無視してください。メソッドをバインドするコンストラクターの部分を完全に見逃していました。うーん..エラーメッセージは正確に何を言っていますか?

React コンポーネントを es6 クラスにリファクタリングする方法については、この記事のセクション 3 を参照してください。

構文を使用する場合React.createClass({componentObjectLiteral})、React はオブジェクト メソッドをコンポーネント インスタンスにバインドします。そのため、_onChangeメソッドが入力のonChangeコールバック関数として呼び出されるとthis、メソッド内のキーワードが_onChangeコンポーネントにバインドされます。

Reactはメソッドを自動バインドしないため、自分で行う必要があります。JSX を次のように変更します。onChange={this._onChange.bind(this)}

于 2015-11-01T13:30:19.020 に答える