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

【问题标题】：How to Create a Search Field in React Typescript如何在 React Typescript 中创建搜索字段
【发布时间】：2021-05-31 13:40:36
【问题描述】：

我是 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

【问题讨论】：

您是否遇到了某些类型的问题？
状态初始化部分和this.setstate部分。

标签： reactjs react-redux react-hooks react-typescript

【解决方案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 替换为描述您的数据的类型。

【讨论】：