尝试将React.CreateClass转换为扩展React.Component

Question

我正在尝试将用React.CreateClass编写的样本转换为扩展React.Component，但是事件处理程序无法获取状态并且对我失败。 有人可以告诉我我在做什么错吗？

工作样本：

var Form4 = React.createClass({
    getInitialState: function () {
        return {
            username: '',
            password: ''
        }
    },
    handleChange: function (key) {
        return function (e) {
            var state = {};
            state[key] = e.target.value;
            this.setState(state);
        }.bind(this);
    },
    resetForm: function() {
        this.setState({username:'', password: ''});
    },
    changeFunkyShizzle: function() {
        this.setState({
            username: 'Tom',
            password: 'Secret'
        });
    },
    updateToServer(e) {
        console.log('update to server....');
        console.log(this.state);
        e.preventDefault();
    },
    render: function(){
        console.log(JSON.stringify(this.state, null, 4));
        return (
          <div>
            <FormFields unamepwd={this.state} handleChange={this.handleChange} updateChanges={this.updateToServer} />

        <pre>{JSON.stringify(this.state, null, 4)}</pre>
        <button onClick={this.changeFunkyShizzle}>Change is near...</button>
        <button onClick={this.resetForm}>Reset all the things!</button>
      </div>
    );
}
});

我试图从中得到的是：

class Form5 extends React.Component {
    constructor() {
        super();
        this.state = {
            username: '',
            password: ''
        };
    }
    handleChange(key) {
        return function (e) {
            var state = {};
            state[key] = e.target.value;
            this.setState(state);
        }.bind(this);
    }
    changeFunkyShizzle() {
        this.setState({
            username: 'Tom',
            password: 'Secret'
        });
    }
    render() {
        let self = this;
        console.log(JSON.stringify(this.state, null, 4));
        return (
            <div>
            <FormFields unamepwd={this.state} handleChange={self.handleChange} updateChanges={self.updateToServer} />

                <pre>{JSON.stringify(this.state, null, 4)}</pre>
                <button onClick={this.changeFunkyShizzle}>Change is near...</button>
                <button onClick={this.resetForm}>Reset all the things!</button>
              </div>)
        ;
    }
}

表单字段：

var FormFields = React.createClass({
    render: function() {
        const upwd = this.props.unamepwd;
        return(
        <form>
            Username: <input
        value={upwd.username}
        onChange={this.props.handleChange('username')} />
  <br />
            Password: <input type="password"
        value={upwd.password}
        onChange={this.props.handleChange('password')} />
  <button onClick={this.props.updateChanges}>Go!</button>
</form>
        );
    }
});

调试时，我注意到，在这两种情况下， this在this.setState(state); 是完全不同的东西。 在Form5中，它仅提供状态，而在Form4中，它是一个完整的React对象，似乎还有更多的状态。

这可能是由于Babel将其转换为其他东西还是由于我正在扩展的类（React.Component）。 我正在迈向React.js世界的第一步，已经有很多东西在运行，但这对我来说并不奏效，我也没有明确说明为什么不这样做。

我用来转译的gulpfile：

var gulp = require('gulp');
var babel = require('gulp-babel');
var sourceMaps = require('gulp-sourcemaps');

gulp.task('transpile', function () {
    gulp.src('source/**.jsx')
        .pipe(sourceMaps.init())
        .pipe(babel({ "presets": "react" }))
        .pipe(babel({ "presets": "es2015" }))
        .pipe(sourceMaps.write('.'))
        .pipe(gulp.dest('app/'));
});

gulp.task('watchers', function () {
    gulp.watch('source/**.jsx', ['transpile']);
});

gulp.task('default', ['watchers'], function () {
    console.log('gulp default task running');
});

Answer 1

对于类方法， this方法不会自动绑定到类（构造函数和React lifecyle方法除外）。

解决方案1

将这些函数绑定到构造函数中：

constructor() {
    super();
    this.state = {
        username: '',
        password: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.changeFunkyShizzle= this.changeFunkyShizzle.bind(this);
}
handleChange(key) {
    return function (e) {
        var state = {};
        state[key] = e.target.value;
        this.setState(state);
    }.bind(this);
}
changeFunkyShizzle() {
    this.setState({
        username: 'Tom',
        password: 'Secret'
    });
}

解决方案2

使用箭头功能。 由于这是ES6功能，因此您可能需要使用正确的plugin配置Babel。

handleChange = (key) => (e) => {
  var state = {};
  state[key] = e.target.value;
  this.setState(state);
}

changeFunkyShizzle = () => {
   this.setState({
       username: 'Tom',
       password: 'Secret'
   });
}

解决方案3

使用自动绑定的第三方库为您执行此操作：

• https://github.com/cassiozen/React-autobind
• https://github.com/andreypopp/autobind-decorator