意外令牌=在reactjs上的事件處理v15

我在copen上玩reactjs v15。我上線unexpected token = error意外令牌=在reactjs上的事件處理v15

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

這是我完全反應的代碼在codepen：https://codepen.io/dotku/pen/QqwgVV?editors=1010

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}>click</button> 
     <input ref="input"/> 
    </div>; 
    } 
} 

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

任何人有任何想法，爲什麼？

來源

2017-09-14 Weijing Lin

的可能的複製[如何使用箭頭功能（公共類字段）作爲類的方法？（https://stackoverflow.com/questions/31362292/how-to-use-arrow-functions-public-類字段-AS-類方法） –

像這樣改變你的代碼。只需使用常規函數而不是箭頭函數，並將其綁定在構造函數中或渲染函數中。

// 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') 
);

一個替代方案是在上述這就需要您啓用實驗功能通天如前所述，如果你需要帶箭頭的功能先走註釋說明。下面的npm命令可以解決這個問題。

npm install --save-dev babel-plugin-transform-class-properties

或者使第2周階段的特點在通天，也將這樣的伎倆，如果你真的要堅持在箭頭的功能。

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

來源

2017-09-14 03:27:51

意外令牌=在reactjs上的事件處理v15

回答

相關問題