Es6 React Arrow function behavior

Question

Я пытаюсь вступить в реакцию, используя borwserify, watchify, babelfiy (с предустановкой es2015).

Может пожалуйста, кто-нибудь объяснить, почему это работает:

export default class HelloWorld extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     username: 'Tyler McGinnis' 
    } 

    this.handleChange = (e) => { 
     this.setState({username: e.target.value}) 
    }; 


} 

render() { 

    return (
     <div> 
      Hello {this.state.username} <br /> 
      Change Name: <input type="text" value={this.state.username} onChange={this.handleChange} /> 
     </div> 
    ) 
} 

в то время как это не является (функция стрелка вне constrcutor)

export default class HelloWorld extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     username: 'Tyler McGinnis' 
    } 
} 


handleChange = (e) => { 
    this.setState({username: e.target.value}) 
}; 

render() { 

    return (
     <div> 
      Hello {this.state.username} <br /> 
      Change Name: <input type="text" value={this.state.username} onChange={this.handleChange} /> 
     </div> 
    ) 
} 

последний дает мне ошибку, то есть:

Unexpected token (18:17) 

handleChange = ((e) => { 
      ^
     this.setState({username: e.target.value}) 
}); 

Все, что я могу найти в Интернете, говорит мне, что оба синтаксиса должны работать, но они не работают. это происходит с предустановленной предварительной установкой es2015 babel (доказательство путем компиляции версии 1 без проблем).

Что мне не хватает? почему can not у меня есть функция стрелки вне конструктора (или, возможно, какая-либо другая «регулярная» функция в классе)? Любая помощь ценится!

Answer 1

В ES6/ES2015 вы не можете использовать функции стрелок как метод класса.

Определить ручкуИзменить как обычный способ.

handleChange(e){ 
    this.setState({username: e.target.value}); 
} 

Bind handleChange с этим в функции конструктора

constructor() { 
    this.handleChange = this.handleChange.bind(this); 
} 

Answer 2

Это ES7 этап-1 функция называется Class properties transform, вы можете установить babel-preset-stage-1 или использовать плагин transform-class-properties, чтобы заставить его работать.