From 7280e791a0743036f0bf855097ce7d7569caa8f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B4=94=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Wed, 9 Mar 2022 16:10:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor(Tree):=20=E5=A2=9E=E5=8A=A0Tree?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8Form=E4=B8=AD=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E7=9A=84=E4=BE=8B=E5=AD=90,=E4=BF=AE=E6=94=B9Tree=20onChange?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=20(#644)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-tree/README.md                | 134 ++++++++++++++++++-
 packages/react-tree/src/index.tsx            |   4 +-
 website/src/routes/components/tree/index.tsx |   4 +-
 3 files changed, 137 insertions(+), 5 deletions(-)

diff --git a/packages/react-tree/README.md b/packages/react-tree/README.md
index d5bd08d878..f2e06abab3 100644
--- a/packages/react-tree/README.md
+++ b/packages/react-tree/README.md
@@ -18,7 +18,7 @@ import Tree from '@uiw/react-tree';
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
 import ReactDOM from 'react-dom';
-import { Tree, Card, Row, Col } from 'uiw';
+import { Tree, Card, Row, Col, } from 'uiw';
 
 const data = [
   {
@@ -651,6 +651,138 @@ const Demo = () => (
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+
+### Form中使用
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import ReactDOM from 'react-dom';
+import { Tree, Row, Col, Form, Button } from 'uiw';
+
+const data = [
+  {
+    label: '湖北省',
+    key: '0-0-0',
+    children:[
+      {
+        label: '武汉市',
+        key: '0-1-0',
+        children:[
+          { label: '新洲区', key: '0-1-1' },
+          { label: '武昌区', key: '0-1-2' },
+          {
+            label: '汉南区',
+            key: '0-1-3',
+            children:[
+              { label: '汉南区1', key: '0-1-3-1' },
+              { label: '汉南区2', key: '0-1-3-2' },
+              { label: '汉南区3', key: '0-1-3-3' },
+            ]
+          },
+        ]
+      },
+      { label: '黄冈市', key: '0-2-0' },
+      {
+        label: '黄石市',
+        key: '0-3-0',
+        children:[
+          { label: '青山区', key: '0-3-1' },
+          { label: '黄陂区', key: '0-3-2' },
+          { label: '青山区', key: '0-3-3' },
+        ]
+      },
+    ]
+  },
+  {
+    label: '上海市',
+    key: '1-0-0',
+    children:[
+      { label: '黄浦区', key: '1-0-1' },
+      { label: '卢湾区', key: '1-0-2' },
+      {
+        label: '徐汇区',
+        key: '1-0-3',
+        children:[
+          { label: '半淞园路街道', key: '1-1-0' },
+          { label: '南京东路街道', key: '1-2-0' },
+          { label: '外滩街道', key: '1-3-0' },
+        ]
+      },
+    ]
+  },
+  {
+    label: '北京市',
+    key: '2-0-0',
+    children:[
+      { label: '东城区', key: '2-1-0' },
+      { label: '西城区', key: '2-2-0' },
+    ]
+  }
+];
+
+const Demo = () => {
+  return (
+    <Form
+      onChange={({ initial, current }) => {}}
+      resetOnSubmit={false}
+      onSubmitError={(error) => error && error.filed ? { ...error.filed } : null}
+      onSubmit={({initial, current}) => {
+        console.log('current: ', current);
+        const ErrObj = {};
+        if (current.tree === 'unknown') {
+          ErrObj.radioGroup = '请选择性别！';
+        }
+        if(Object.keys(ErrObj).length > 0) {
+          const err = new Error();
+          err.filed = ErrObj;
+          throw err;
+        }
+        Notify.success({
+          title: '提交成功！', description: `填写：【填写成功】！`
+        });
+      }}
+      fields={{
+        tree: {
+          value: 'girl',
+          label: '请输入内容',
+          help: '必须选择性别！',
+          initialValue: ['0-1-1'],
+          children: <Tree
+            // multiple 
+            checkStrictly
+            data={data}
+          />,
+        },
+      }}
+    >
+      {({ fields, state, canSubmit }) => {
+        return (
+          <div>
+            <Row>
+              <Col>{fields.tree}</Col>
+            </Row>
+            <Row>
+              <Col>
+                <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                <pre style={{ padding: 10, marginTop: 10 }}>
+                  {JSON.stringify(state.current, null, 2)}
+                </pre>
+              </Col>
+            </Row>
+          </div>
+        );
+      }}
+    </Form>
+  )
+}
+ReactDOM.render(<Demo />, _mount_);
+```
+
+
 ## Props
 
 | 参数 | 说明 | 类型 | 默认值 |
diff --git a/packages/react-tree/src/index.tsx b/packages/react-tree/src/index.tsx
index c0a45a41fe..ef8c9bfe9a 100644
--- a/packages/react-tree/src/index.tsx
+++ b/packages/react-tree/src/index.tsx
@@ -45,7 +45,7 @@ export interface TreeProps extends IProps, Omit<HTMLDivProps, 'onChange'> {
     item: TreeData,
     evn: React.MouseEvent<HTMLElement>,
   ) => void;
-  onChange?: (keys: (string | number | undefined)[]) => void;
+  onChange?: (key: string | number, eys: (string | number | undefined)[]) => void;
   value?: TreeData['key'][];
 }
 
@@ -210,7 +210,7 @@ export default function Tree(props: TreeProps) {
     }
     setCurSelectedKeys(selKeys);
     onSelected && onSelected(selKeys, item.key, selected, item, evn);
-    onChange?.(selKeys);
+    onChange?.(item.key, selKeys);
   }
   return (
     <div className={cls} {...elementProps}>
diff --git a/website/src/routes/components/tree/index.tsx b/website/src/routes/components/tree/index.tsx
index 1bd542dc23..754892eefc 100755
--- a/website/src/routes/components/tree/index.tsx
+++ b/website/src/routes/components/tree/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Tree, Row, Col, Card, Icon } from 'uiw';
+import { Tree, Row, Col, Card, Icon, Form, Button } from 'uiw';
 import Markdown from '../../../components/Markdown';
 
 export default () => (
   <Markdown
     path="https://github.com/uiwjs/uiw/tree/master/packages/react-tree/README.md"
-    dependencies={{ Tree, Row, Col, Card, Icon }}
+    dependencies={{ Tree, Row, Col, Card, Icon, Form, Button }}
     renderPage={async () => {
       const md = await import('uiw/node_modules/@uiw/react-tree/README.md');
       return md.default || md;