forgeplus-react/src/forge/Main/sub/ReadmeCatelogue.jsx

import React , { useState } from 'react';
import { Anchor , Input } from 'antd';
import './sub.scss';
import { useEffect } from 'react';

const { Link } = Anchor;

function ReadmeCatelogue({ menuList , hash }) {
  const [ goHref , setGoHref ] = useState("");
  const [ value , setValue ] = useState("");
  const [ menu , setMenu] = useState(menuList);


  function onChange(link){
    setGoHref(link);
  };

  function changeValue(e) {
    setValue(e.target.value);
    if(e.target.value){
      let m = menuList.filter(i=>i.text.toLowerCase().indexOf(e.target.value.toLowerCase())>-1);
      setMenu(m);
    }else{
      setMenu(menuList);
    }
  }
  return(
    <div>
      <div className="searchBox">
        <Input 
          placeholder={"请输入关键字"} 
          value={value}
          onChange={changeValue}
          prefix={<i className="iconfont icon-sousuo_icon1 font-14"></i>}/>
      </div>
      {
        menu && menu.length>0?
        <div className="anchorBox">
          <Anchor affix={false} onChange={onChange} offsetTop={140}>
            {
              menu.map((item,key)=>{
                return(
                  <div style={{paddingLeft:`${item.level *10}px`}} className={goHref===item.href?"items active":"items"}>
                    <Link href={`#${item.text}`} title={item.text} />
                  </div>
                )
              })
            }
          </Anchor>
        </div>
        :""
      }
      
    </div>
  )
}
export default ReadmeCatelogue;