Невозможно использовать функции Arrow внутри класса реагирующих компонентов [duplicate]
На этот вопрос уже есть ответ:
Как использовать функции-стрелки (открытые поля класса) в качестве методов класса? 4 ответаЯ начал проект, в котором я использую React JS для внешнего интерфейса узла js во внутреннем интерфейсе. Я использовал веб-пакет для объединения файлов JS. я использовал babel вместе с другими необходимыми вещами. Всякий раз, когда я использую функции стрелок внутри класса реагирования, это дает синтаксическую ошибку. нравится Ошибка сборки модуля: SyntaxError: Неожиданный токен. Но я могу использовать функцию стрелки в узле без каких-либо проблем.
это мой конфигурационный файл веб-пакета
import path from 'path';
import webpack from 'webpack';
import 'react-hot-loader/patch';
export default{
devtool: 'eval',
entry:[
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.join(__dirname,'client/index.js')],
output:{
path:'/',
publicPath:'/'
},
plugins:[
new webpack.NoErrorsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module:{
loaders:[
{
test:/\.js$/,
include:path.join(__dirname,'client'),
loaders: ['react-hot-loader/webpack', 'babel']
},
{
test: /\.jpe?g$|\.gif$|\.svg$|\.png$/i,
loader: 'file-loader?name=[name].[ext]'
}
]
},
resolve:{
extension:['','.js']
}
}
Мой файл React
class mapSidebar extends React.Component{
constructor(props,context){
super(props,context);
this.state = {
dataSource: []
};
this.handleUpdateInput = this.handleUpdateInput.bind (this);
}
handleUpdateInput = (value) => {
this.setState({
dataSource: [
value,
value + value,
value + value + value,
],
});
};
render(){
return(
<div>
<Paper zDepth={2}>
<div>Hello</div>
<div>
<AutoComplete
hintText="Type anything"
dataSource={this.state.dataSource}
onUpdateInput={this.handleUpdateInput}
/>
</Paper>
</div>
);
}
}
export default mapSidebar;
Как решить эту проблему?