reactjs v15上的事件句柄上出现意外标记

我在copen上玩JS v15。我在线上得到了

意外的令牌=错误

  _handleClick = (e) => {
    console.log(ReactDOM.findDOMNode(this.refs.input));
  }

以下是我在codepen上的完整反应代码：

类欢迎扩展React.Component{
_handleClick=（e）=>{
log（ReactDOM.findDOMNode（this.refs.input））；
}
render（）{
返回
你好，{this.props.name}
点击
;
}
}
常量元素=；
ReactDOM.render(
元素，
document.getElementById（'root'））
);

---

有人知道为什么吗？

像这样更改代码。只需使用常规函数而不是箭头函数，并在构造函数中或渲染函数中绑定它

// class Input extends React.Component {
//   render() {
//     return <input type="text" value="aInput"/>;
//   }
// }
class Welcome extends React.Component {
  _handleClick(e) {
    console.log(ReactDOM.findDOMNode(this.refs.input));
  }
  render() {
    return <div>
      <h1>Hello, {this.props.name}</h1>
      <button onKeyPress={this._handleClick.bind(this)}>click</button>
      <input ref="input"/>
    </div>;
  }
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

另外，如果您真的需要坚持使用箭头功能，那么在Babel中启用stage 2功能也可以做到这一点

npm install --save-dev babel-preset-stage-2

---

像这样更改代码。只需使用常规函数而不是箭头函数，并在构造函数中或渲染函数中绑定它

// class Input extends React.Component {
//   render() {
//     return <input type="text" value="aInput"/>;
//   }
// }
class Welcome extends React.Component {
  _handleClick(e) {
    console.log(ReactDOM.findDOMNode(this.refs.input));
  }
  render() {
    return <div>
      <h1>Hello, {this.props.name}</h1>
      <button onKeyPress={this._handleClick.bind(this)}>click</button>
      <input ref="input"/>
    </div>;
  }
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

另外，如果您真的需要坚持使用箭头功能，那么在Babel中启用stage 2功能也可以做到这一点

npm install --save-dev babel-preset-stage-2

可能的重复可能的重复