feat: 通过 ref 管理非受控组件

Author: ceilf6

React/sandboxs/src/App.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 // import CoverButton from './test/CoverButton';
 import Father from './test/Father';
 import Form from './components/Form';
+import { FileUpload } from './components';
 
 const el = (
     // 写在 组件中间{ }中的 会自动传入到 props.children
@@ -15,7 +16,14 @@ const el = (
     // </CoverButton>
 
     // <Father />
-    <Form legend={['name','key']}/>
+    // <Form legend={['name','key']}/>
+    <FileUpload
+        accept=".png,.jpg,.pdf"
+        multiple
+        onUpload={(files) => {
+            console.log(files);
+        }}
+    />
 )
 
 

React/sandboxs/src/components/FileUpload/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+class FileUpload extends React.Component {
+    constructor(props) {
+        super(props);
+        // 创建 ref，命名采用 xxxRef
+        this.uploadRef = React.createRef();
+    }
+
+    clickHandle = () => {
+        // 通过 this.uploadRef.current 获取 input DOM 节点
+        const files = this.uploadRef.current ? this.uploadRef.current.files : null;
+
+        if (!files || !files.length) {
+            console.log('请先选择文件');
+            return;
+        }
+
+        console.log(files);
+
+        if (typeof this.props.onPick === 'function') {
+            this.props.onPick(files);
+        }
+    };
+
+    render() {
+        const { accept, multiple = false, buttonText = '获取用户输入的内容' } = this.props;
+
+        return (
+            <div>
+                <input type="file" ref={this.uploadRef} accept={accept} multiple={multiple} />
+                <button type="button" onClick={this.clickHandle}>{buttonText}</button>
+            </div>
+        );
+    }
+}
+
+export default FileUpload;

React/sandboxs/src/components/Layout/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-function Layout({ children }) {
+export default function Layout({ children }) {
   return <div>{children}</div>;
 }
 

React/sandboxs/src/components/index.js

@@ -1,3 +1,4 @@
 export { default as Input } from './Input'
 export { default as Form } from './Form'
-export { default as Layout } from './Layout'
+export { default as Layout } from './Layout'
+export { default as FileUpload } from './FileUpload'