forgeplus-react/src/forge/Issues/Component/caseDrop.jsx

import React , { useEffect , useState } from 'react';
import { AutoComplete } from 'antd';
import axios from 'axios';
import '../index.scss';

const { Option } = AutoComplete;

function CaseDrop({
  name , owner , projectsId , changeValue , value , onBlur
}){
  const [ filterUnitList , setFilterUnitList ] = useState([]);
  const [ v , setV ] = useState(value);

  useEffect(()=>{
    getCaseList(value);
  },[])

  useEffect(()=>{
    setV(value);
  },[value])

  useEffect(()=>{
    changeValue(v);
    getCaseList(v);
  },[v])

  async function getCaseList(value){
    setV(value);
    const url = `/v1/${owner}/${projectsId}/issues/test_cases`;
    await axios.get(url,{
      params:{
        keyword:value
      }
    }).then(response=>{
      if(response && response.data){
        setFilterUnitList(response.data.data);
      }
    }).catch(error=>{})
  }

  return(
    <li>
      <span>{name}</span>
      <AutoComplete
        value={v}
        showSearch
        onChange={setV}
        placeholder={name}
        className={"boxStyles"}
        bordered={false}
        onBlur={()=>{if(onBlur){onBlur(v)}}}
      >
        {
          filterUnitList && filterUnitList.length > 0 &&
          filterUnitList.map(i=>{
            return(
              <Option value={i.test_case}>{i.test_case}</Option>
            )
          })
        }
      </AutoComplete>
    </li>
  )
}
export default CaseDrop;