如何在React中获取API并实现ID搜索及按钮变色功能

针对你的需求，我调整了代码以实现按ID精准搜索、搜索按钮点击变色，并规范了数据展示格式：

核心修改点 #

• 新增按钮点击状态，控制搜索按钮的颜色切换
• 将实时搜索改为点击按钮触发搜索，符合需求中的交互逻辑
• 搜索逻辑改为精准匹配id字段，而非模糊匹配所有内容
• 规范列表展示结构，用<ul>包裹<li>，符合HTML语义
• 优化初始状态展示，避免空标签占位

修改后的完整代码 #

import "mvp.css";
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Input, Button } from "semantic-ui-react";

function KimiQuotes() {
  const [APIData, setAPIData] = useState([]);
  const [searchResult, setSearchResult] = useState(null);
  const [searchInput, setSearchInput] = useState("");
  const [isButtonClicked, setIsButtonClicked] = useState(false);

  // 初始化获取所有语录数据
  useEffect(() => {
    axios.get(`https://kimiquotes.herokuapp.com/quotes`)
      .then((response) => {
        setAPIData(response.data);
      })
      .catch(err => console.error("数据获取失败:", err));
  }, []);

  // 搜索逻辑：精准匹配ID
  const handleSearch = () => {
    setIsButtonClicked(true);
    const targetQuote = APIData.find(item => item.id.toString() === searchInput.trim());
    setSearchResult(targetQuote);
  };

  // 输入框变化时重置按钮状态和搜索结果
  const handleInputChange = (e) => {
    setSearchInput(e.target.value);
    setIsButtonClicked(false);
    setSearchResult(null);
  };

  return (
    <div style={{ padding: 20 }}>
      <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
        <Input
          placeholder="输入ID搜索"
          value={searchInput}
          onChange={handleInputChange}
        />
        <Button
          icon="search"
          onClick={handleSearch}
          style={{ 
            backgroundColor: isButtonClicked ? "#ff6b6b" : "DodgerBlue",
            color: "white",
            transition: "background-color 0.3s ease"
          }}
        />
      </div>

      <div style={{ marginTop: 20 }}>
        {searchResult ? (
          <ul style={{ listStyle: "none", padding: 0 }}>
            <li><strong>ID:</strong> {searchResult.id}</li>
            <li><strong>语录:</strong> {searchResult.quote}</li>
            <li><strong>年份:</strong> {searchResult.year}</li>
          </ul>
        ) : searchInput && isButtonClicked ? (
          <p>未找到对应ID的语录</p>
        ) : null}
      </div>
    </div>
  );
}

export default function App() {
  return <KimiQuotes />;
}

功能说明 #

1. 按钮变色：点击搜索按钮后，按钮背景色从蓝色变为红色，输入框内容变化时恢复蓝色
2. 按ID搜索：输入ID后点击按钮，精准匹配对应数据，若不存在则显示提示
3. 数据展示：搜索结果以规范的列表形式展示id、quote和year字段

内容的提问来源于stack exchange，提问作者sisiii