問題：

• 前一段時間使用antd的Tree組件的時候遇到一個問題：將Tree組件放在Form表單的時候，想用initialValue給Tree的defaultExpandedKeys，defaultSelectedKeys和defaultCheckedKeys賦初始值，已找到解決方法。

解決思路：

• Tree 不是 form control，你不能直接把 Tree 丟給 getFieldDecorator，需要把 Tree 封裝下再丟給 getFieldDecorator。
• 注意4.x版本的antd不支持Form.create()()方法。

代碼展示

1. 封裝Tree

export default  class TreeDemo extends React.Component {
  render() {
    return (
      <Tree
        checkable
        expandedKeys={['STATUS']}
        checkedKeys={this.props.value}
        onCheck={this.props.onChange}
      >
        <TreeNode title="全選" key="STATUS">
          <TreeNode title="未成交" key="A"></TreeNode>
          <TreeNode title="已成交" key="B"></TreeNode>
          <TreeNode title="流拍" key="C"></TreeNode>
          <TreeNode title="未來供應" key="D"></TreeNode>
        </TreeNode>
      </Tree>
    );
  }
}

2. Form表單

import React from 'react';
import { toJS } from 'mobx';
import { observer } from "mobx-react";
import { Row, Col, Button, Form, Popconfirm, message, Checkbox, Tree } from 'antd';

const { Item } = Form
const { TreeNode } = Tree;

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {checkList:['A']}
  }

  //確定
  handleSubmit = e => {
    e && e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      console.log(toJS(values));

      if (!err) {
        //驗證無誤
        console.log('驗證無誤---');
        this.props.state.getParcelList()
      }
    });
  }

  //土地狀態
  onCheck = checkedKeys => {
    //過濾掉父級的key
    checkedKeys = checkedKeys.filter(item => item !== 'STATUS')
    this.setState({checkList:checkedKeys})
  };

  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <div>
        <Form layout="inline" autoComplete="off" onSubmit={this.handleSubmit} >      
          <Row>
            <Col span={4}>demo</Col>
            <Col span={20}>
              <Item>
                {
                  getFieldDecorator('demo', {
                    initialValue: this.state.checkList,
                  })
                    (
                      <TreeDemo onChange={this.onCheck} />
                    )}
              </Item>
            </Col>
          </Row>        
          <Row type='flex' justify="center">
            <Button type='primary' htmlType="submit">確定</Button>
          </Row>
        </Form>
      </div>
    )
  }
}
export default Form.create({
  onValuesChange(props, changeValues, allValues) {
    // console.log(allValues, 'allValues');

  }
})(Index);