feat: export FileList component's editBtnClick

HOUSHENGREN · May 17, 2023 · 0e0269e · 0e0269e
1 parent b002426
commit 0e0269e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/src/App.js b/src/App.js
@@ -18,7 +18,7 @@ function App() {
   const [openedFileIDs, setOpenedFileIDs] = useState([])
   const [unsaveFileIDs, setUnsaveFileIDs] = useState([])
   const [searchedFiles, setSearchedFiles] = useState([])
-  const fileListNode = useRef(null)
+  const fileListNode = useRef()
 
   console.log(openedFileIDs, '88899998')
   const openedFiles = openedFileIDs.map(ID => {
@@ -106,21 +106,21 @@ function App() {
   const fileListArr = searchedFiles.length ? searchedFiles : files
 
   const createNewFile = () => {
-    const id = v4()
+    const item = {
+      id: v4(),
+      title: '',
+      body: '## 请输入 markdown',
+      createdAt: new Date().getTime()
+   }
 
     const newFiles = [
-        ...files,
-        {
-           id,
-           title: '',
-           body: '## 请输入 markdown',
-           createdAt: new Date().getTime()
-        }
+      ...files,
+      item
     ]
     setFiles(newFiles)
     console.log('fileListNode', fileListNode)
 
-    // fileListNode.current.onFileClick(id) // todo ? 没有用
+    fileListNode.current.editBtnClick(item) // todo ? 没有用
   }
 
 

diff --git a/src/components/FileList.js b/src/components/FileList.js
@@ -1,15 +1,24 @@
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef, forwardRef, useImperativeHandle } from "react"
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEdit, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
 import propTypes from 'prop-types'
 import useKeyPress from "../hooks/useKeyPress"
 
-const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
+const FileList = forwardRef(
+    ({files, onFileClick, onSaveEdit, onFileDelete}, ref) => {
+
+        //暴露方法 handelValid 给父组件
+        useImperativeHandle(ref, () => ({
+            editBtnClick
+        }))
+
     const [editId, setEditId] = useState(null)
     const [value, setValue] = useState('')
     const node = useRef(null)
 
+    const editBtnClick = (file) => { setValue(file.title); setEditId(file.id) }
+
     const enterPressed = useKeyPress(13)
     const escPressed = useKeyPress(27)
 
@@ -54,7 +63,7 @@ const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
                                 <button 
                                     type="button"
                                     className="icon-button col-2"
-                                    onClick={() => { setValue(file.title); setEditId(file.id)}}
+                                    onClick={() => editBtnClick(file)}
                                 >
                                     <FontAwesomeIcon title="编辑" size="lg" icon={faEdit} />
                                 </button>
@@ -97,6 +106,7 @@ const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
         </ul>
     )
 }
+)
 
 FileList.propTypes = {
     files: propTypes.array,

diff --git a/src/components/FileSearch.js b/src/components/FileSearch.js
@@ -10,6 +10,10 @@ import useKeyPress from "../hooks/useKeyPress"
  * 
  */
 
+// #region
+// 56465
+// #endregion
+
 const FileSearch = ({ title, onFileSearch=(() => {}) }) => {
     const [inputActive, setInputActive] = useState(false)
     const [value, setValue] = useState('')