1

编辑：我的错误，我的 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;
4

2 回答 2

0

编辑：无视。我完全错过了绑定方法的构造函数部分。嗯..错误消息到底说了什么？

查看本文第三部分关于将 React 组件重构为 es6 类的内容。

使用该React.createClass({componentObjectLiteral})语法时，React 将您的对象方法绑定到组件实例，因此当您的_onChange方法作为输入的onChange回调函数被调用时，方法中的this关键字将_onChange绑定到您的组件。

React不会为你自动绑定你的方法，所以你必须自己做。将您的 JSX 更改为onChange={this._onChange.bind(this)}

于 2015-11-01T13:30:19.020 回答
0

psigns 正确会React.createClass()自动为您将方法绑定到组件实例。当您class在 React 中使用语法时，情况并非如此。

但是当您将属性初始化器与箭头函数结合使用时，有一种非常巧妙的可能性：

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 的优秀文章中了解到这一点。

于 2015-12-05T19:36:29.280 回答