Reactjs返回带有下拉菜单记录的错误意外标记

我知道可能有人问过这个问题，但我只是感到沮丧。Reactjs将下面代码行中的=标记为意外令牌错误

  handleChange1 = {(selectedOption) => {

已安装所有必需的依赖项

下面是完整的代码

  import React, { Component } from 'react';
    import { render } from 'react-dom';
    import { Link } from 'react-router-dom';
    import { connect } from 'react-redux';

    import Hello from './Hello';
    import Select from 'react-select'
    //import './style.css';
    import 'react-select/dist/react-select.css';

    class Plans extends Component {
      constructor() {
        super();
        this.state = {
          name: 'React',
          selectedOption: {},
          selectedOption2: {}
        };
      }

      handleChange1 = {(selectedOption) => {
        this.setState({selectedOption});
    }
      };

      handleChange2 = (selectedOption) => {
        this.setState({selectedOption2: selectedOption})
      }

      render() {
        const options1 = [
          {value: 'one', label: 'One'},
          {value: 'two', label: 'Two'}
        ];

        const options2 = [
          {value: 'one-a', label: 'One A', link: 'one'},
          {value: 'one-b', label: 'One B', link: 'one'},
          {value: 'two-a', label: 'Two A', link: 'two'},
          {value: 'two-b', label: 'Two B', link: 'two'}
        ];

        const filteredOptions = options2.filter((o) => o.link === this.state.selectedOption.value)

        return (
          <div>
            <p>Select one first</p>
            <Select
              name="form-field-name"
              value={this.state.selectedOption.value}
              onChange={this.handleChange1}
              options={options1}
            />
            <p>Then the other</p>
            <Select
              name="form-field-name"
              value={this.state.selectedOption2.value}
              onChange={this.handleChange2}
              options={filteredOptions}
            />
          </div>
        );
      }
    }

    //render(<Plans />, document.getElementById('app'));


    function mapStateToProps(state) {

}



    const connectedPlans = connect(mapStateToProps)(Plans);
    export { connectedPlans as Plans };

更新

App.jsx

import React from 'react';
import { Router, Route } from 'react-router-dom';
import { connect } from 'react-redux';

import { history } from '../_helpers';
import { alertActions } from '../_actions';
import { PrivateRoute } from '../_components';

import { Plans } from '../Plans';

class App extends React.Component {
    constructor(props) {
        super(props);

        const { dispatch } = this.props;
        history.listen((location, action) => {
            // clear alert on location change
            dispatch(alertActions.clear());
        });
    }

    render() {
        const { alert } = this.props;
        return (
            <div className="jumbotron">
                <div className="container">
                    <div className="col-sm-8 col-sm-offset-2">
                        {alert.message &&
                            <div className={`alert ${alert.type}`}>{alert.message}</div>
                        }
                        <Router history={history}>
                            <div>



<Route path="/plans" component={Plans} />
                            </div>
                        </Router>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const { alert } = state;
    return {
        alert
    };
}

const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App }; 

从“React”导入React；
从“react Router dom”导入{Router，Route}；
从'react redux'导入{connect}；
从“../\u helpers”导入{history}；
从“../\u actions”导入{alertActions}；
从“../\u组件”导入{PrivateRoute}；
从“../Plans”导入{Plans}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
const{dispatch}=this.props；
历史。聆听（（位置、动作）=>{
//位置更改时清除警报
分派（alertActions.clear（））；
});
}
render（）{
const{alert}=this.props；
返回(
{alert.message&&
{alert.message}
}
);
}
}
函数MapStateTops（状态）{
const{alert}=状态；
返回{
警觉的
};
}
const connectedApp=connect（mapStateToProps）（应用程序）；
导出{connectedApp as App}；

我如何解决这个问题。首先，我在上面的评论中实现了由Dacre提供支持的解决方案。然后我发现react select.css'文件不在节点模块中，因此我重新安装了它，以便能够导入它

我在下面添加了这行代码

render(<Plans />, document.getElementById('app'));

 function mapStateToProps(state) {

}
    const connectedPlans = connect(mapStateToProps)(Plans);
    export { connectedPlans as Plans };

---

更新arrow方法语法如下：

handleChange1=（selectedOption）=>{this.setState（{selectedOption}）；} function mapStateToProps(state) {

}
    const connectedPlans = connect(mapStateToProps)(Plans);
    export { connectedPlans as Plans };