javascript - 我如何将输入文本传递到 React 应用程序中的过滤器组件

Question

我正在尝试使用“rick and morty API”构建一个应用程序，其中包含具有各种参数(例如性别、生存状态、图像等)的 Angular 色列表。

我正在尝试创建一个搜索栏，以便我可以从 493 个字符的列表中搜索名称。

我的 CardList.js 组件:

import React from "react";
import axios from "axios";
import Card from "./Card";

class CardList extends React.Component {
  state = {
    // url: `https://rickandmortyapi.com/api/character/${[...Array(494).keys()]}`,
    character: []
  };

  async componentDidMount() {
    //const res = await axios.get(this.state.url);
    const ids = Array(493)
      .fill(null)
      .map((_, idx) => idx + 1)
      .join(","); // '1,2,3...,300'
    const url = `https://rickandmortyapi.com/api/character/[${ids}]`;
    const res = await axios.get(url);

    this.setState({
      character: res.data
    });
  }

  handleChange(e) {
    e.preventDefault();
    let typedValue = e.target.value;
    console.log(typedValue);
  }

  render() {
    let filter = this.state.character.filter(function(e) {
      return e.name.includes("Pickle Rick");
    });

    return (
      <div>        
        <form>
          <input type="text" name="title" onChange={this.handleChange} />          
        </form>

        {filter.map(character => (
          <Card
            key={character.id}
            imgURL={character.image}
            id={character.id}
            name={character.name}
            status={character.status}
            species={character.species}
            gender={character.gender}
            type={character.type ? character.type : "Unknown"}
          />
        ))}
      </div>
    );
  }
}

export default CardList;

在我的过滤方法中，我将其中一个 Angular 色的名称硬编码为“Pickle Rick”，但我想传递event.target.value，以便它可以匹配值并且可以渲染仅匹配的精确卡。 我怎样才能做到这一点？请帮帮我!

Answer 1

您可以在您所在的州设置typedValue。

handleChange = e => {
    e.preventDefault();
    let typedValue = e.target.value;
    this.setState({typedValue});
}

当您初始化状态时，您可以使用空字符串初始化此typedValue

this.state = {
    character: [],
    typedValue: ''
};

在渲染中，您可以使用状态中的这些值

render() {
    const {character, typedValue} = this.state
    let filter = character.filter(char => char.name.includes(typedValue));
    // ...
}