Question

我正在尝试使用“ Rick and Morty API”开发应用程序。在给定的文档中，他们总共提供了493个字符。

我在做什么：

1）我创建了两个名为card.js的组件，在其中建立了一个类似Card的界面，以从API提取数据（例如名称，种类，类型，性别）进行渲染。 2），并且我在cardlist.js组件中映射了这些卡。

我正在尝试做的事情： 1）我想在所有字符/卡的顶部构建一个搜索栏，该搜索栏仅显示我搜索过的名称。

我尝试了什么： 1）：我在应用程序的顶部构建了一个输入标签，现在我想获取这些输入的结果，并将其与493个字符的名称进行比较，如果匹配，则仅呈现这些卡片

我的Card.js组件：

import React from "react";

class Card extends React.Component {
  render() {
    return (
      <div>
        <h1>ID: {this.props.id}</h1>
        <img src={this.props.imgURL} alt="Image failed to load" />
        <h1>NAME: {this.props.name}</h1>
        <h2>STATUS: {this.props.status}</h2>
        <h3>SPECIES: {this.props.species}</h3>
        <h3>GENDER: {this.props.props}</h3>
        <h4>TYPE: {this.props.type}</h4>
      </div>
    );
  }
}

export default Card;

我的cardList.js组件：

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

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
    });
  }

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

    return (
      <div>
        {/* {this.state.character.map(character => (
          <Search2 name={character.name} />
        ))} */}
        <div>
          <input type="text" placeholder="enter name" />
        </div>
        {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;

例如，我已经将名称的值硬编码为“ Evil Morty”（在我的CardList组件中），所以现在它仅显示一张名为“ Evil Morty”的卡但是我想将其替换为“ {event.target.value}”之类的东西，以便从搜索栏中的键入文本中获取输入。

请帮帮我！

如何访问在render函数中输入字段中键入的数据，以及如何使用输入来呈现某些信息

0 个答案: