Javascript 将基于类的组件转换为基于函数的组件

在这里，我正在研究react的自动完成和自动填充

我试图将其转换为react钩子，因为我编写的所有代码都只包含在钩子中

根据我的理解，我已经在某种程度上将它转换为基于钩子的。但我不能完全转换它

原始代码

import React，{Component}来自“React”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：{
代码：“，
姓名：“，
单位：“，
比率：“
},
光标：0，
搜索项目：[]
};
this.autocomplete=this.autocomplete.bind（this）；
this.handleKeyup=this.handleKeyup.bind（this）；
this.handleKeydown=this.handleKeydown.bind（this）；
this.handleListKeydown=this.handleListKeydown.bind（this）；
this.selectItem=this.selectItem.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
自动完成（evt）{
让text=evt.target.value；
取回(`https://invoiceitems.herokuapp.com/items?name_like=${text}&_limit=6`）
.然后（（res）=>res.json（））
。然后（（数据）=>{
this.setState（{searchItems:data}）；
});
}
handleKeyup（evt）{
如果（evt.keyCode===27）{
this.setState（{searchItems:[]}）；
返回false；
}
}
handleKeydown（evt）{
const{cursor，searchItems}=this.state；
//向上/向下箭头按钮应选择下一个/上一个列表元素
如果（evt.keyCode===38&&cursor>0）{
this.setState（（prevState）=>({
游标：prevState.cursor-1
}));
}else if（evt.keyCode==40&&cursor({
游标：prevState.cursor+1
}));
}
如果（evt.keyCode===13）{
让currentItem=searchItems[光标]；
如果（currentItem！==未定义）{
常量{name，code，rate，unit}=currentItem；
this.setState（{item:{name，code，rate，unit}，searchItems:[]}）；
}
}
如果（evt.keyCode===8）{
this.setState（{item:{name:，code:，rate:，unit:}}）；
}
}
选择项目（id）{
const{searchItems}=this.state；
让selectedItem=searchItems.find（（item）=>item.code==id）；
常量{code，name，unit，rate}=selectedItem；
this.setState（{item:{code，name，unit，rate}}）；
this.setState（{searchItems:[]}）；
}
handleListKeydown（evt）{
console.log（evt.keyCode）；
}
手柄更换（evt）{
this.setState（{item:{[evt.target.name]：evt.target.value}}）；
}
render（）{
const{searchItems，cursor，item，handleChange}=this.state；
常量{代码、名称、单位、费率}=项目；
返回(
自动完成示例
项目名称
{searchItems.length>0&&(

{searchItems.map（（item，idx）=>(
this.selectItem（item.code）}
onKeyDown={（evt）=>this.handleListKeydown（evt，item.code）}
>
{item.name}

))}

)}
);
}
}
导出默认应用程序；

链接到原始代码：

使用挂钩 下面是我试图转换为钩子的代码

import React, { useState } from "react";

export default function FunctionName(props) {
  const [item, setItem] = useState({
    vendorNameData: invoiceDetail[0].invoiceData.vendor,
    vendorAccountData: invoiceDetail[0].invoiceData.vendaAccount,
    vendorAddressData: invoiceDetail[0].invoiceData.vendorAddress
  });
  const [cursor, setCursor] = useState(0);
  const [searchItems, SetSearchItems] = useState([]);

  function AutoComplete(evt) {
    let text = evt.target.value;
    console.log(text);
    fetch(`https://invoiceitems.herokuapp.com/items?name_like=${text}&_limit=6`)
      .then((res) => res.json())
      .then((data) => {
        SetSearchItems(data);
      });
  }

  function HandleKeyUp(evt) {
    if (evt.keyCode === 27) {
      SetSearchItems([]);
      return false;
    }
  }

  function HandleKeyDown(evt) {
    // const [cursor, setCursor] = useState();
    // const [searchItems, SetSearchItems] = useState()

    if (evt.keyCode === 38 && cursor > 0) {
      setCursor((cursor) => ({ cursor: cursor + 1 }));
    } else if (evt.keyCode === 40 && cursor < searchItems.length - 1) {
      setCursor((cursor) => ({ cursor: cursor + 1 }));
    }
    if (evt.keyCode === 13) {
      let currentItem = searchItems[cursor];
      if (currentItem !== undefined) {
        const {
          vendorNameData,
          vendorAccountData,
          vendorAddressData
        } = currentItem;
        setItem({ vendorNameData, vendorAccountData, vendorAddressData });
        SetSearchItems([]);
      }
    }
    if (evt.keyCode === 8) {
      setItem({
        vendorNameData: "",
        vendorAccountData: "",
        vendorAddressData: ""
      });
    }
  }

  function SelectItem(id) {
    const [searchItems, SetSearchItems] = useState();
    let selectedItem = searchItems.find((item) => item.code === id);
    const {
      vendorNameData,
      vendorAccountData,
      vendorAddressData
    } = selectedItem;
    setItem({ vendorNameData, vendorAccountData, vendorAddressData });
    SetSearchItems([]);
  }

  function HandleListKeyDown(evt) {
    console.log(evt.keyCode);
  }

  function HandleChange(evt) {
    setItem({ item: { [evt.target.name]: evt.target.value } });
  }
}

import React，{useState}来自“React”；
导出默认函数FunctionName（道具）{
const[item，setItem]=useState({
vendorNameData:invoiceDetail[0]。invoiceData.vendor，
vendorAccountData:invoiceDetail[0]。invoiceData.vendaAccount，
vendorAddressData:invoiceDetail[0]。invoiceData.vendorAddress
});
const[cursor，setCursor]=useState（0）；
const[searchItems，SetSearchItems]=useState（[]）；
函数自动完成（evt）{
让text=evt.target.value；
console.log（文本）；
取回(`https://invoiceitems.herokuapp.com/items?name_like=${text}&_limit=6`）
.然后（（res）=>res.json（））
。然后（（数据）=>{
设置搜索系统（数据）；
});
}
功能HandleKeyUp（evt）{
如果（evt.keyCode===27）{
集耳结构（[]）；
返回false；
}
}
功能HandleKeyDown（evt）{
//const[cursor，setCursor]=useState（）；
//常量[searchItems，SetSearchItems]=useState（）
如果（evt.keyCode===38&&cursor>0）{
setCursor（（cursor）=>（{cursor:cursor+1}））；
}else if（evt.keyCode==40&&cursor（{cursor:cursor+1}））；
}
如果（evt.keyCode===13）{
让currentItem=searchItems[光标]；
如果（currentItem！==未定义）{
常数{
vendorNameData，
供应商会计数据，
供应商地址数据
}=当前项目；
setItem（{vendorNameData，vendorAccountData，vendorAddressData}）；
集耳结构（[]）；
}
}
如果（evt.keyCode===8）{
设定项({
vendorNameData:“”，
供应商帐户数据：“”，
供应商地址数据：“
});
}
}
功能选择项（id）{
const[searchItems，SetSearchItems]=useState（）；
让selectedItem=searchItems.find（（item）=>item.code==id）；
常数{
vendorNameData，
供应商会计数据，
供应商地址数据
}=selectedItem；
setItem（{vendorNameData，vendorAccountData，vendorAddressData}）；
集耳结构（[]）；
}
功能HandleListKeyDown（evt）{
console.log（evt.keyCode）；
}
功能手柄更改（evt）{
setItem（{item:{[evt.target.name]：evt.target.value}}）；
}
}

指出我落后的地方真的很有帮助。我已经尽力了，但这是我能想到的

---

任何帮助都将不胜感激。

我已经“复制”并清理了您的原始文档

import React, { useState } from "react";

export default function FunctionName(props) {
  const [item, setItem] = useState({
    vendorNameData: invoiceDetail[0].invoiceData.vendor,
    vendorAccountData: invoiceDetail[0].invoiceData.vendaAccount,
    vendorAddressData: invoiceDetail[0].invoiceData.vendorAddress
  });
  const [cursor, setCursor] = useState(0);
  const [searchItems, SetSearchItems] = useState([]);

  function AutoComplete(evt) {
    let text = evt.target.value;
    console.log(text);
    fetch(`https://invoiceitems.herokuapp.com/items?name_like=${text}&_limit=6`)
      .then((res) => res.json())
      .then((data) => {
        SetSearchItems(data);
      });
  }

  function HandleKeyUp(evt) {
    if (evt.keyCode === 27) {
      SetSearchItems([]);
      return false;
    }
  }

  function HandleKeyDown(evt) {
    // const [cursor, setCursor] = useState();
    // const [searchItems, SetSearchItems] = useState()

    if (evt.keyCode === 38 && cursor > 0) {
      setCursor((cursor) => ({ cursor: cursor + 1 }));
    } else if (evt.keyCode === 40 && cursor < searchItems.length - 1) {
      setCursor((cursor) => ({ cursor: cursor + 1 }));
    }
    if (evt.keyCode === 13) {
      let currentItem = searchItems[cursor];
      if (currentItem !== undefined) {
        const {
          vendorNameData,
          vendorAccountData,
          vendorAddressData
        } = currentItem;
        setItem({ vendorNameData, vendorAccountData, vendorAddressData });
        SetSearchItems([]);
      }
    }
    if (evt.keyCode === 8) {
      setItem({
        vendorNameData: "",
        vendorAccountData: "",
        vendorAddressData: ""
      });
    }
  }

  function SelectItem(id) {
    const [searchItems, SetSearchItems] = useState();
    let selectedItem = searchItems.find((item) => item.code === id);
    const {
      vendorNameData,
      vendorAccountData,
      vendorAddressData
    } = selectedItem;
    setItem({ vendorNameData, vendorAccountData, vendorAddressData });
    SetSearchItems([]);
  }

  function HandleListKeyDown(evt) {
    console.log(evt.keyCode);
  }

  function HandleChange(evt) {
    setItem({ item: { [evt.target.name]: evt.target.value } });
  }
}

import React, {useState, useCallback} from 'react';

function Input() {
    const [item, setItem] = useState({
        code: '',
        name: '',
        unit: '',
        rate: ''
    });

    const [cursor, setCursor] = useState(0);

    const [searchItems, setSearchItems] = useState([]);

    const autocomplete = useCallback((evt) => {
        const text = evt.target.value;
        fetch(
            `https://invoiceitems.herokuapp.com/items?name_like=${text}&_limit=6`
        )
            .then((res) => res.json())
            .then((data) => {
                setSearchItems(data);
            });
    }, []);

    const handleKeyup = useCallback((evt) => {
        if (evt.keyCode === 27) {
            setSearchItems([]);
            return false;
        }
        return true;
    }, []);

    const handleKeydown = useCallback(
        (evt) => {
            // arrow up/down button should select next/previous list element
            if (evt.keyCode === 38 && cursor > 0) {
                setCursor((prevCursor) => prevCursor - 1);
            } else if (evt.keyCode === 40 && cursor < searchItems.length - 1) {
                setCursor((prevCursor) => prevCursor + 1);
            }

            if (evt.keyCode === 13) {
                let currentItem = searchItems[cursor];
                if (currentItem !== undefined) {
                    const {code, name, unit, rate} = currentItem;
                    setItem({code, name, unit, rate});
                    setSearchItems([]);
                }
            }

            if (evt.keyCode === 8) {
                setItem({code: '', name: '', unit: '', rate: ''});
            }
        },
        [cursor, searchItems]
    );

    const selectItem = useCallback(
        (id) => {
            let selectedItem = searchItems.find((item) => item.code === id);
            const {code, name, unit, rate} = selectedItem;
            setItem({code, name, unit, rate});
            setSearchItems([]);
        },
        [searchItems]
    );

    const handleListKeydown = useCallback((evt) => {
        console.log(evt.keyCode);
    }, []);

    return (
        <div className={'container mt-3'}>
            <h1 className={'h2 text-center'}>{'Autocomplete Example'}</h1>
            <div className={'form-group'}>
                <label htmlFor={'autocomplete'}>{'Item Name'}</label>
                <input
                    type={'text'}
                    id={'autocomplete'}
                    onChange={autocomplete}
                    onKeyUp={handleKeyup}
                    onKeyDown={handleKeydown}
                    value={item.name}
                    className={'custom-input form-control'}
                />
                {searchItems.length > 0 && (
                    <ul className={'list-group'}>
                        {searchItems.map((item, idx) => (
                            <li
                                className={
                                    cursor === idx
                                        ? 'active list-group-item'
                                        : 'list-group-item'
                                }
                                key={idx}
                                onClick={() => selectItem(item.code)}
                                onKeyDown={handleListKeydown}>
                                {item.name}
                            </li>
                        ))}
                    </ul>
                )}
            </div>
        </div>
    );
}

export {Input};