Javascript 如何在ES6（ES2015）中编写React教程

我在ES6中重写了，被困在tutorial16.js中。以es6格式编写此es5的正确方法是什么

// tutorial16.js
var CommentForm = React.createClass({
  getInitialState: function() {
    return {author: '', text: ''};
  },
  handleAuthorChange: function(e) {
    this.setState({author: e.target.value});
  },
  handleTextChange: function(e) {
    this.setState({text: e.target.value});
  },
  render: function() {
    return (
      <form className="commentForm">
        <input
          type="text"
          placeholder="Your name"
          value={this.state.author}
          onChange={this.handleAuthorChange}
        />
        <input
          type="text"
          placeholder="Say something..."
          value={this.state.text}
          onChange={this.handleTextChange}
        />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

//tutorial16.js
var CommentForm=React.createClass({
getInitialState:函数（）{
返回{作者：''，文本：'}；
},
handleAuthorChange:函数（e）{
this.setState（{author:e.target.value}）；
},
handleTextChange:函数（e）{
this.setState（{text:e.target.value}）；
},
render:function（）{
返回(
);
}
});

这是我在ES6中编写的CommentForm.jsx。如果我尝试在表单中键入任何内容，我会在控制台中收到以下消息：UncaughtTypeError:无法读取undefined的属性“setState” 我做错了什么

import React from 'react';

class CommentForm extends React.Component {

    constructor(props){
        super(props);
        this.state = { author: '', text: '' }
    }

    handleAuthorChange(e){
        this.setState({author: e.target.value});
    };

    handleTextChange(e){
        this.setState({text: e.target.value});
    }

    render(){
        return(
            <form className="commentForm">
                <input type="text" placeholder="Your name" value={this.state.author} onChange={this.handleAuthorChange}/>
                <input type="text" placeholder="Say something..." value={this.state.text} onChange={this.handleTextChange}/>
                <input type="submit" value="Post" />
            </form>
        );
    }
}

export default CommentForm;

从“React”导入React；
类CommentForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={作者：''，文本：'}
}
handleAuthorChange（东）{
this.setState（{author:e.target.value}）；
};
handleTextChange（e）{
this.setState（{text:e.target.value}）；
}
render（）{
返回(
);
}
}
导出默认格式；

使用属性初始值设定项（ES6+）时，它可能如下所示：

class CommentForm extends React.Component {

    state = {
        author: '', text: ''
    };

    handleAuthorChange = (e) => {
        this.setState({author: e.target.value});
    };

    handleTextChange = (e) => {
        this.setState({text: e.target.value});
    };

    render() {
        return <form className="commentForm">
            <input
                type="text"
                placeholder="Your name"
                value={this.state.author}
                onChange={this.handleAuthorChange}
            />
            <input
                type="text"
                placeholder="Say something..."
                value={this.state.text}
                onChange={this.handleTextChange}
            />
            <input type="submit" value="Post" />
        </form>
    }
}

类CommentForm扩展了React.Component{
状态={
作者：“”，文本：“”
};
handleAuthorChange=（e）=>{
this.setState（{author:e.target.value}）；
};
handleTextChange=（e）=>{
this.setState（{text:e.target.value}）；
};
render（）{
返回
}
}

您缺少实例的绑定

onChange

处理程序。它们是在完全不同的上下文中被激发的，其中

此

不会指向您的

CommentForm

它应该是：

<input onChange={this.handleAuthorChange.bind(this)} type="text" placeholder="Your name" value={this.state.author} />
<input onChange={this.handleTextChange.bind(this)} type="text" placeholder="Say something..." value={this.state.text} />

因为ES6是向后兼容的，所以它也是ES5。你具体想改变什么？ES6课程？@loganfsmyth是的。查看我的回复：@FelixKling我稍后会测试这个。但看起来就是这样。谢谢渲染函数没有理由是箭头。作为类属性使用的内容越多，你的代码将变得越慢。原因只是没有绑定

此
以在构造函数中呈现此代码对我不起作用：./app/src/component/comment-form.jsx模块构建失败：SyntaxError:/home/ricardo/Documents/Projects/react-es2015-webpack/app/src/component/comment-form.jsx中的错误：意外标记（5:10）3 |类CommentForm扩展了React.Component{4 |>5 | state={6 |作者：''，文本：''7 |}；8 |这是到我的repo的链接，以及我到目前为止所做的事情：为什么要在构造函数中调用呈现函数？你不应该自己调用呈现函数。这个箭头对我来说也没有意义……你确实可以访问“this”无论如何，即使没有箭头…@xCrZx
这个
在render中也将是正确的，因为React将其作为实例方法调用。您不需要绑定它。输入上有一个onChange。只需向右滚动滚动条，Hahay您缺少
.bind（这个）
是代码的一部分。你说得对！谢谢！@KadoBOT你也可以在每个事件处理程序的构造函数中使用模式
this.handleAuthorChange=this.handleAuthorChange.bind（this）
。这样，你就不必每次需要绑定函数了。