fix(react-file-input): 修复 file-input 在 form 表单中无法重置 value 问题 (#910)

uiwjs · Sep 2, 2022 · d030992 · d030992
1 parent 664441a
commit d030992
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 76 deletions.
diff --git a/packages/react-file-input/README.md b/packages/react-file-input/README.md
@@ -210,82 +210,101 @@ ReactDOM.render(
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
+import React,{ useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { Form, Row, Col, Icon } from 'uiw';
+import { Form, Row, Col, Icon,FileInput,Button } from 'uiw';
 
-ReactDOM.render(
-  <div>
-    <Form
-      onSubmit={({initial, current}) => {
-         console.log('current',current)
-      }}
-      fields={{
-        picture1: {
-          label: '图片墙',
-          initialValue: [
-            {
-              dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
-            }
-          ],
-          children: (
-            <FileInput uploadType="card">
-              <Icon type="plus" />
-            </FileInput>
-          )
-        },
-        picture2: {
-          label: '图片列表',
-          initialValue: [
-            {
-              dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
-            }
-          ],
-          children: (
-            <FileInput uploadType="picture">
-              <Button>新增</Button>
-            </FileInput>
-          )
-        },
-        picture3: {
-          label: '图片名称列表',
-          children: (
-            <FileInput uploadType="text">
-              <Button>新增</Button>
-            </FileInput>
+function Demo() {
+  const form = useRef()
+  return (
+    <div>
+      <Button
+        type="danger" 
+        onClick={()=>{
+          const value =  form.current.getFieldValues()
+          form.current.setFields({
+            ...value,
+            picture1:[],
+            picture2:[],
+            picture3:[]
+          })
+        }}
+      > 
+        清空照片
+      </Button>
+      <Form
+        ref={form}
+        onSubmit={({initial, current}) => {
+          console.log('current',current)
+        }}
+        fields={{
+          picture1: {
+            label: '图片墙',
+            initialValue: [
+              {
+                dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
+              }
+            ],
+            children: (
+              <FileInput uploadType="card">
+                <Icon type="plus" />
+              </FileInput>
+            )
+          },
+          picture2: {
+            label: '图片列表',
+            initialValue: [
+              {
+                dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
+              }
+            ],
+            children: (
+              <FileInput uploadType="picture">
+                <Button>新增</Button>
+              </FileInput>
+            )
+          },
+          picture3: {
+            label: '图片名称列表',
+            children: (
+              <FileInput uploadType="text">
+                <Button>新增</Button>
+              </FileInput>
+            )
+          },
+        }}>
+        {({ fields, state, canSubmit }) => {
+          return (
+            <div>
+              <Row>
+                <Col>{fields.picture1}</Col>
+              </Row>
+              <Row>
+                <Col>{fields.picture2}</Col>
+              </Row>
+              <Row>
+                <Col>{fields.picture3}</Col>
+              </Row>
+              <Row gutter={10}>
+                <Col>
+                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
+                </Col>
+              </Row>
+              <Row>
+                <Col>
+                  <pre style={{ padding: '10px 0 0 10px' }}>
+                    {JSON.stringify(state.current, null, 2)}
+                  </pre>
+                </Col>
+              </Row>
+            </div>
           )
-        },
-      }}>
-      {({ fields, state, canSubmit }) => {
-        return (
-          <div>
-            <Row>
-              <Col>{fields.picture1}</Col>
-            </Row>
-            <Row>
-              <Col>{fields.picture2}</Col>
-            </Row>
-            <Row>
-              <Col>{fields.picture3}</Col>
-            </Row>
-            <Row gutter={10}>
-              <Col>
-                <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
-              </Col>
-            </Row>
-            <Row>
-              <Col>
-                <pre style={{ padding: '10px 0 0 10px' }}>
-                  {JSON.stringify(state.current, null, 2)}
-                </pre>
-              </Col>
-            </Row>
-          </div>
-        )
-      }}
-    </Form>
-  </div>,
-  _mount_
-);
+        }}
+      </Form>
+    </div>
+  )
+}
+ReactDOM.render(<Demo />,_mount_)
 ```
 
 ## Props

diff --git a/packages/react-file-input/src/FileList.tsx b/packages/react-file-input/src/FileList.tsx
@@ -13,7 +13,7 @@ export const FileList = (props: FileInputUploadProps) => {
 
   useEffect(() => {
     setFileList(inValue);
-  }, []);
+  }, [value]);
 
   const handleClickInput = useCallback(() => openFileDialog(inputRef), [inputRef]);
 

diff --git a/website/src/routes/components/file-input/index.tsx b/website/src/routes/components/file-input/index.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { FileInput, Overlay, Button, Icon, Form, Row, Col } from 'uiw';
 import Markdown from '../../../components/Markdown';
 
 export default function Page() {
   return (
     <Markdown
       path="https://github.com/uiwjs/uiw/tree/master/packages/react-file-input/README.md"
-      dependencies={{ FileInput, Button, Overlay, Icon, Form, Row, Col }}
+      dependencies={{ FileInput, Button, Overlay, Icon, Form, Row, Col, useRef }}
       renderPage={async () => {
         const md = await import('uiw/node_modules/@uiw/react-file-input/README.md');
         return md.default || md;