Question

编辑：我的错误，我的webpack hotloader每次运行构建时都会出于某种原因缓存旧的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;

Answer 1

编辑：无视。我完全错过了绑定方法的构造函数部分。嗯..错误信息的确切含义是什么？

查看this article about refactoring react components to es6 classes的第三部分。

使用React.createClass({componentObjectLiteral})语法时，React会将您的对象方法绑定到组件实例，以便在您的_onChange方法被调用为输入的onChange回调函数时， <{1}}方法中的this关键字绑定到您的组件。

React 不为您自动绑定您的方法，因此您必须自己动手。将您的JSX更改为_onChange

Answer 2

psigns是正确的React.createClass()自动将方法绑定到组件实例。在React中使用class语法时不是这种情况。

但是，当您将属性初始值设定项与箭头函数组合时，有一种非常简洁的可能性：

class SearchBox extends React.Component {

  // …

 _onChange = (event, value) => {
    // …

    // this will be bound to component
    this.setState({text: event.target.value}); 
  }

  // …

}

然后你可以像以前一样在jsx部分使用这个方法：

onChange={this._onChange}  // without .bind(this)

我从阅读Steven Luscher's excellent post了解到这一点。

“setState on undefined”这个错误尝试使用es6样式反应组件在yahoo fluxible

2 个答案: