如何在React Typescript中创建搜索字段

Question

我是react typescript的新手，我正在进行一个项目，该项目使用搜索栏来查找我从数据库中获得的数据。

我在stackoverflow中找到了结果——有人用React Js写了答案。但我想要React Typescript中的答案：反应代码如下：

class BodyData extends React.Component {
state = {
query: "",
data: [],
filteredData: []
};
handleInputChange = event => {
const query = event.target.value;
this.setState(prevState => {
const filteredData = prevState.data.filter(element => {
return element.name.toLowerCase().includes(query.toLowerCase());
});
return {
query,
filteredData
};
});
};
getData = () => {
fetch(`http://localhost:4000/restaurants`)
.then(response => response.json())
.then(data => {
const { query } = this.state;
const filteredData = data.filter(element => {
return element.name.toLowerCase().includes(query.toLowerCase());
});
this.setState({
data,
filteredData
});
});
};
componentWillMount() {
this.getData();
}
render() {
return (
<div className="searchForm">
<form>
<input
placeholder="Search for..."
value={this.state.query}
onChange={this.handleInputChange}
/>
</form>
<div>{this.state.filteredData.map(i => <p>{i.name}</p>)}</div>
</div>
);
}
}
> I want the sample autocomplete textbox code in React-Typescript

Answer 1

在typescript中，React.Component是一个泛型。您可以使用它来定义您的状态和道具的类型。这将自动将适当的类型定义应用于状态初始化和setState。

interface BodyDataProps {
// if you have any props, put them here
}
interface BodyDataState {
query: string;
data: WhateverTheDataTypeIs[];
filteredData: WhateverTheDataTypeIs[];
}
class BodyData extends React.Component<BodyDataProps, BodyDataState> {
// rest of the class is the same

我不知道你的数据是什么样子的，所以用描述你的数据的类型替换WhateverTheDataTypeIs。