在react中使用ant design 的时候箭头函数报错，以及state报错

Question

import { Table, Input, Icon, Button, Popconfirm } from 'antd';

class EditableCell extends React.Component {
  state = {
    value: this.props.value,
    editable: false,
  }
  handleChange = (e) => {
    const value = e.target.value;
    this.setState({ value });
  }
  check = () => {
    this.setState({ editable: false });
    if (this.props.onChange) {
      this.props.onChange(this.state.value);
    }
  }
  edit = () => {
    this.setState({ editable: true });
  }
  render() {
    const { value, editable } = this.state;
    return (
      <div className="editable-cell">
        {
          editable ?
            <div className="editable-cell-input-wrapper">
              <Input
                value={value}
                onChange={this.handleChange}
                onPressEnter={this.check}
              />
              <Icon
                type="check"
                className="editable-cell-icon-check"
                onClick={this.check}
              />
            </div>
            :
            <div className="editable-cell-text-wrapper">
              {value || ' '}
              <Icon
                type="edit"
                className="editable-cell-icon"
                onClick={this.edit}
              />
            </div>
        }
      </div>
    );
  }
}

class EditableTable extends React.Component {
  constructor(props) {
    super(props);
    this.columns = [{
      title: 'name',
      dataIndex: 'name',
      width: '30%',
      render: (text, record) => (
        <EditableCell
          value={text}
          onChange={this.onCellChange(record.key, 'name')}
        />
      ),
    }, {
      title: 'age',
      dataIndex: 'age',
    }, {
      title: 'address',
      dataIndex: 'address',
    }, {
      title: 'operation',
      dataIndex: 'operation',
      render: (text, record) => {
        return (
          this.state.dataSource.length > 1 ?
          (
            <Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(record.key)}>
              <a href="#">Delete</a>
            </Popconfirm>
          ) : null
        );
      },
    }];

    this.state = {
      dataSource: [{
        key: '0',
        name: 'Edward King 0',
        age: '32',
        address: 'London, Park Lane no. 0',
      }, {
        key: '1',
        name: 'Edward King 1',
        age: '32',
        address: 'London, Park Lane no. 1',
      }],
      count: 2,
    };
  }
  onCellChange = (key, dataIndex) => {
    return (value) => {
      const dataSource = [...this.state.dataSource];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.setState({ dataSource });
      }
    };
  }
  onDelete = (key) => {
    const dataSource = [...this.state.dataSource];
    this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
  }
  handleAdd = () => {
    const { count, dataSource } = this.state;
    const newData = {
      key: count,
      name: `Edward King ${count}`,
      age: 32,
      address: `London, Park Lane no. ${count}`,
    };
    this.setState({
      dataSource: [...dataSource, newData],
      count: count + 1,
    });
  }
  render() {
    const { dataSource } = this.state;
    const columns = this.columns;
    return (
      <div>
        <Button className="editable-add-btn" onClick={this.handleAdd}>Add</Button>
        <Table bordered dataSource={dataSource} columns={columns} />
      </div>
    );
  }
}

ReactDOM.render(<EditableTable />, mountNode);

以上是ant design的一个表格 的demo，我拿来直接用的时候，handleChange = (e) => {}这一类的写法全都报错，我都改成了handleChange(e){}，虽然能解决问题，但我不知道原因是什么，大佬解释一下。
问题一：为什么handleChange = (e) => {}这个写法报错

而且我使用这个demo的时候，EditableCell组件的

state = {
    value: this.props.value,
    editable: false,
  }
  

这里会报错。错误如下

./src/components/edgeTable/edgeTable.js
Module build failed: SyntaxError: Unexpected token (5:10)

  3 | 
  4 | class EditableCell extends React.Component {
> 5 |     state = {
    |           ^
  6 |       value: this.props.value,
  7 |       editable: false,
  8 |     }

 @ ./src/components/setiot/setiot.js 23:17-53
 @ ./src/components/home.js
 @ ./src/index.js
 @ multi ./node_modules/_webpack-dev-server@2.9.1@webpack-dev-server/client?http://localhost:8080 ./src/index.js
msgErrors @ client?de60:157
onmessage @ socket.js?1928:38
EventTarget.dispatchEvent @ eventtarget.js?86b6:51
(anonymous) @ main.js?db74:274
SockJS._transportMessage @ main.js?db74:272
EventEmitter.emit @ emitter.js?ec2a:50
WebSocketTransport.ws.onmessage @ websocket.js?75af:35

大佬们帮忙看看
问题二：为什么state报错，我尝试放进construct里面还是报错，报错的内容是this.props.value.
求解决方案

Answer 1

.babelrc这个文件是这样配置的吗？

{
  presets: ['es2015', 'stage-0', 'react'],
  "plugins": [
    "transform-decorators-legacy"
  ],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

问题二 this.state = {} 要写在super()后面, 才会有this,这样写：

constructor(props) {
    super(props);
    this.state = {
         value: props.value,
         editable: false
    }
}

Answer 2

你的es6语法是配置好了吗？这种写法没有错！不行你在jsfindle中去尝试尝试这种写法！

Answer 3

在 react 中使用 handleChange = (e) => {} 这种语法糖，需要配置 babel。

这种方法是用来绑定 this，一般有四种方式绑定 this，这种形式handleChange = (e) => {} 只是其中一种，其他几种请参看下面这篇文章。
React ES6 class 中的this 绑定的几种方式

平常我自己开发我比较喜欢用 ES8 的装饰器模式。

如果你非要使用这种方式，你可以使用 Babel 启用 实验性的类属性，点击进去可以看到 babel 的配置语法提案：

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
  }
  // 警告：这个语法是实验性的！
  // 这里使用箭头绑定方法：
  handleClick = () => {
    alert(this.state.message);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

请注意，上述语法是实验性的，并且这个语法将来可能会发生变化，或者这个提案可能不会纳入语言范畴。

如果你想更稳妥的方法，你有以下选择：

• 在构造函数中绑定方法。
• 使用箭头函数，例如，onClick={(e) => this.handleClick(e)}。
• 保持使用 createReactClass。

state 报错也是一样，你没有配置，所以编译时候没有转换成浏览器识别的代码，所以浏览器不识别，所以就报错啦。

具体可以看一下这个：Class-的静态属性和实例属性中的Class-的静态属性和实例属性这一小节

还有这个proposal-class-fields这个是关于这种规范的解读。也就是 ESnext class features for JavaScript 这个特性。

配置的话这个插件就行：transform-class-properties