时间戳

首页 > 解决方案 > 如何在 React Typescript 中创建搜索字段

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

问题描述

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

我在 stackoverflow 中找到了一些人使用 React Js 编写答案的结果。但我想要 React-Typescript 中的答案：下面的 React 代码：

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

标签： reactjsreact-reduxreact-hooksreact-typescript

解决方案

在 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为描述您的数据的类型。

推荐阅读