我是 React-Typescript 的新手。我想使用 react typescript 在我的项目中创建自动完成文本框。我在谷歌搜索我得到了一些示例代码。我尝试在我的应用程序中使用。我遇到了一些错误。
在我的 Autocomplete.tsx 中,我遇到了一些错误,我将在下面解释我的错误,当我在 index.tsx 中绑定自动完成组件时,我遇到了数据错误。
AutoComplete.tsx
import react, { ChangeEvent, FC, useState } from "react";
import styled from "styled-components";
import { FaArrowDown } from "@react-icons/all-files/fa/FaArrowDown";
import {
AutoCompleteContainer,
AutoCompleteIcon,
Input,
AutoCompleteItem,
AutoCompleteItemButton
} from "./styles";
const Root = styled.div`
position: relative;
width: 320px;
`;
interface IData {
name: string;
code: string;
}
interface autoCompleteProps {
iconColor?: string;
inputStyle?: react.CSSProperties;
optionsStyle?: react.CSSProperties;
data: any[];
}
export const AutoComplete: FC<autoCompleteProps> = ({
iconColor,
inputStyle,
optionsStyle,
data
}) => {
const [search, setSearch] = useState({
text: "",
suggestions: []
});
const [isComponentVisible, setIsComponentVisible] = useState(true);
const onTextChanged = (e: ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
let suggestions = [];
if (value.length > 0) {
const regex = new RegExp(`^${value}`, "i");
suggestions = data.sort().filter((v: IData) => regex.test(v.name));
}
setIsComponentVisible(true);
setSearch({ suggestions, text: value });
};
const suggestionSelected = (value: IData) => {
setIsComponentVisible(false);
setSearch({
text: value.name,
suggestions: []
});
};
const { suggestions } = search;
return (
<Root>
<div
onClick={() => setIsComponentVisible(false)}
style={{
display: isComponentVisible ? "block" : "none",
width: "200vw",
height: "200vh",
backgroundColor: "transparent",
position: "fixed",
zIndex: 0,
top: 0,
left: 0
}}
/>
<div>
<Input
id="input"
autoComplete="off"
value={search.text}
onChange={onTextChanged}
type={"text"}
style={inputStyle}
/>
<AutoCompleteIcon color={iconColor} isOpen={isComponentVisible}>
<FaArrowDown />
</AutoCompleteIcon>
</div>
{suggestions.length > 0 && isComponentVisible && (
<AutoCompleteContainer style={optionsStyle}>
{suggestions.map((item: IData) => (
<AutoCompleteItem key={item.code}>
<AutoCompleteItemButton
key={item.code}
onClick={() => suggestionSelected(item)}
>
{item.name}
</AutoCompleteItemButton>
</AutoCompleteItem>
))}
</AutoCompleteContainer>
)}
</Root>
);
};
索引.tsx
import { render } from "react-dom";
import { AutoComplete } from "./AutoComplete";
import data from "./data.json";
const rootElement = document.getElementById("root");
render(
<>
<h2>Simple-React Autocomplete Functional-component Tsx</h2>
<AutoComplete
inputStyle={{ backgroundColor: "PaleTurquoise" }}
optionsStyle={{ backgroundColor: "LemonChiffon" }}
data={data}
iconColor="Turquoise"
/>
</>,
rootElement
);
数据.json
[
{ "name": "Afghanistan", "code": "AF" },
{ "name": "Åland Islands", "code": "AX" },
{ "name": "Albania", "code": "AL" },
{ "name": "Algeria", "code": "DZ" },
{ "name": "American Samoa", "code": "AS" },
{ "name": "AndorrA", "code": "AD" },
{ "name": "Angola", "code": "AO" },
{ "name": "Anguilla", "code": "AI" }
]
<块引用>
在 index.ts 文件中,当我绑定 data={data} 值时出现错误 (JSX 属性) autoCompleteProps.data: any[]
Type '{}' is missing the following properties from type 'any[]': length, pop, push, concat, and 28 more.ts(2740)
AutoComplete.tsx(27, 3): The expected type comes from property 'data' which is declared here on type 'IntrinsicAttributes & autoCompleteProps & { children?: ReactNode; }'
<块引用>
Autocomplete.tsx 文件(如何解决问题)
在建议行错误:(属性)建议:从不[]
Type 'any[]' is not assignable to type 'never[]'.
Type 'any' is not assignable to type 'never'.ts(2322
答案 0 :(得分:0)
我建议你尝试改变这个
interface autoCompleteProps {
iconColor?: string;
inputStyle?: react.CSSProperties;
optionsStyle?: react.CSSProperties;
data: IData[];
}
还有这个
const [search, setSearch] = useState({
text: "",
suggestions: [] as IData[]
});
还有这个
let suggestions : IData[] = [];