搜索组件

import React, {useState, useEffect, useRef} from 'react';
const FileSearch = ({title, onFileSearch}) => { // 从props 取变量，父组件传值
  const [ inputActive, setInputActive] = useState(false)
  const [value, setValue] = useState('')
  let node = useRef(null) // 获取dom节点
  useEffect(() => {
    const handleInputEvent = (event) => {
      const {keyCode} = event
      if (keyCode === 13 && inputActive) {
        onFileSearch(value)
      } else if(keyCode === 27 && inputActive) {
        closeInput(event)
      }
    }
    document.addEventListener('keyup', handleInputEvent)
    return () => {
      document.removeEventListener('keyup', handleInputEvent)
    }
  })
    // useEffect可以使用多个
  useEffect(() => {
    if (inputActive) {
      node.current.focus() // 聚焦
    }
  }, [inputActive])
  const closeInput = (e) => {
    e.preventDefault()
    setInputActive(false)
    setValue('')
  }
  return (
    <div className="alert alert-prim">
        // 多个判断 
      {
        !inputActive && 
        <div className="d-flex justify-content-between align-items-center">
          <span>{title}</span>
          <button
            type='button'
            className="btn btn-primary"
            onClick={ () => {setInputActive(true)} }
          >搜索</button>
        </div>
      }
      {
        inputActive &&
        <div className="row">
          <input type="text"
            value={value}
            className="form-control col-8"
            ref={node}
            onChange={ e => setValue(e.target.value)}
          />
          <button
            type='button'
            className="btn btn-primary col-4"
            onClick={closeInput}
          >
            关闭
          </button>
        </div>
      }
    </div>
  )
}
export default FileSearch

<FileSearch
  title="文档管理"
  onFileSearch={(a)=>{console.log(123, a)}}
/>