ESLint eslint-plugin-react箭头功能

Question

I'm having some trouble with ESLint and arrow functions in a react component using the eslint-plugin-react plugin. I just did these commands:

1. npm i -g eslint eslint-plugin-react
2. eslint SignUpPage.jsx

And here is SignUpPage:

/**
 * Created by jwilso37 on 4/5/2017.
 */

import React from 'react';
import SignUpForm from '../components/landing/SignUpForm.jsx';
import 'whatwg-fetch'


class SignUpPage extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            errors: {},
            user: {
                email: '',
                name: '',
                password: ''
            }
        };
    }

    /**
     * Change the user object.
     *
     * @param {object} e - the JavaScript event object
     */

    changeUser = (e) => {
        const field = e.target.name;
        const user = this.state.user;
        user[field] = e.target.value;

        this.setState({
            user
        });
    };

    /**
     * Handles processForm event and submits request to server.
     * @param e
     */
    processForm = (e) => {
        e.preventDefault();
        const form = document.querySelector('form');
        const formData = new FormData(form);

        fetch('/api/signup', {
            method: 'POST',
            body: formData
        }).then(response => {
            if (response.ok) {
                this.setState({
                    errors: {}
                });
            }
            else {
                // returned > 300 status code
                response.json().then(j => {
                    const errors = j.errors ? j.errors : {};
                    errors.summary = j.message;
                    this.setState({
                        errors: errors
                    })
                })
            }
        })
    };


    /**
     * Render the component.
     */
    render() {
        return (
            <SignUpForm
                onSubmit={this.processForm}
                onChange={this.changeUser}
                errors={this.state.errors}
                user={this.state.user}
            />
        );
    }

}

export default SignUpPage;

But the output of eslint is oddly this:

ubuntu@ETFly:/vagrant/client/src/containers$ eslint signuppage.jsx

/vagrant/client/src/containers/signuppage.jsx
  31:16  error  Parsing error: Unexpected token =

Saying that the = sign on the changeUser anonymous function is an error? Here's my .eslintrc.json :

{
  "plugins": [
    "react"
  ],
  "settings": {
    "react": {
      "createClass": "createClass", // Regex for Component Factory to use, default to "createClass"
      "pragma": "React",  // Pragma to use, default to "React"
      "version": "15.0" // React version, default to the latest React stable release
    }
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "env": {
    "browser": true
  }
}

Answer 1

OK I seemed to have fixed it. I installed babel-eslint with npm i --save-dev babel-eslint after I realized my JSX spread operator wasn't working as well. It made me think that all of ES6 stuff was messed up. So now I just added babel-eslint parser with adding "parser": "babel-eslint" to the end of my .eslintrc.json file and everything is good! I guess the default eslint parser doesn't support these features...