我刚接触使用带有React的ES6类,之前我已经将我的方法绑定到当前对象(在第一个示例中显示),但ES6是否允许我使用箭头将类函数永久绑定到类实例?(当作为回调函数传递时很有用.)当我尝试使用它时,我遇到错误,就像使用CoffeeScript一样:
class SomeClass extends React.Component {
// Instead of this
constructor(){
this.handleInputChange = this.handleInputChange.bind(this)
}
// Can I somehow do this? Am i just getting the syntax wrong?
handleInputChange (val) => {
console.log('selectionMade: ', val);
}
Run Code Online (Sandbox Code Playgroud)
因此,如果我要传递SomeClass.handleInputChange
给setTimeout
它,那么它将被限定为类实例,而不是window
对象.
我可能错过了装载机吗?我认为我们应该能够在组件体中使用这些ES6函数,以避免必须执行.bind(this)
语法反应文档
ERROR in ./client/admin-side/components/Form.jsx
Module build failed: SyntaxError: Unexpected token (15:17)
14 |
> 15 | handleChange = (event) => {
| ^
16 | this.setState({value: event.target.value})
17 | }
Run Code Online (Sandbox Code Playgroud)
我的.babelrc有以下内容:
{
"presets": ["env", "react"],
"plugins": ["transform-object-rest-spread"]
}
Run Code Online (Sandbox Code Playgroud)
我正在使用babel-loader
js/jsx文件