如何在React中获取用户输入并调用API进行查询？

核心转换思路 #

将原生JS的DOM操作替换为React的受控组件与状态管理，保留原API请求逻辑并补充TypeScript类型约束，表单提交改用React内置的事件处理方式。

完整代码 #

import { useState } from 'react';
// 导入样式文件，对应原HTML中的styles.css
import './App.css';

// 为API返回数据定义TypeScript类型，避免类型报错
type Definition = {
  definition: string;
  // 可根据实际API返回补充example、synonyms等字段
};

type Meaning = {
  definitions: Definition[];
};

type DictionaryResponse = {
  meanings: Meaning[];
}[];

// 保留原API请求逻辑，增加TypeScript类型约束
async function getDefinition(word: string): Promise<DictionaryResponse | undefined> {
  try {
    const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`请求失败: ${response.status}`);
    }
    const data = await response.json() as DictionaryResponse;
    return data;
  } catch (error) {
    if (error instanceof Error) {
      console.log("Error:", error.message);
    }
    return undefined;
  }
}

export default function DictionaryApp() {
  // 管理输入框内容的状态，替代原生JS的DOM取值
  const [inputWord, setInputWord] = useState('');
  // 管理查询结果的状态，用于页面展示（原代码仅console.log，这里补充展示逻辑）
  const [definitions, setDefinitions] = useState<Definition[]>([]);

  // 表单提交处理函数，替代原生JS的addEventListener
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputWord.trim()) return; // 空输入不发起请求

    const result = await getDefinition(inputWord);
    if (result && result[0]?.meanings[1]?.definitions) {
      console.log(result[0].meanings[1].definitions);
      setDefinitions(result[0].meanings[1].definitions);
    } else {
      console.log("未找到对应释义");
      setDefinitions([]);
    }
  };

  return (
    <div className="App">
      <header className="header">
        <form onSubmit={handleSubmit}>
          <label htmlFor="string">Search for a definition</label>
          {/* 受控组件：value绑定状态，onChange更新状态，替代原生JS的DOM操作 */}
          <input
            id="string"
            placeholder="Enter word..."
            type="text" {/* 修正原HTML的错误：input没有type="string"，应为text */}
            value={inputWord}
            onChange={(e) => setInputWord(e.target.value)}
          />
          <button className="fa fa-search" type="submit"></button>
        </form>
      </header>

      {/* 可选：展示查询到的释义 */}
      <div className="definitions-container">
        {definitions.length > 0 ? (
          <ul>
            {definitions.map((item, index) => (
              <li key={index}>{item.definition}</li>
            ))}
          </ul>
        ) : (
          <p>请输入单词查询释义</p>
        )}
      </div>
    </div>
  );
}

关键改动说明 #

1. 受控组件：输入框通过value绑定inputWord状态，onChange事件实时更新状态，替代原生JS的document.getElementById('string').value取值方式。
2. TypeScript类型约束：为API返回数据定义类型，让代码更严谨，避免隐式类型报错。
3. 表单事件处理：用React的onSubmit直接绑定到表单元素，替代原生的addEventListener。
4. 状态管理：用useState保存输入值和查询结果，方便后续在页面展示结果（原代码仅在控制台打印）。
5. 细节修正：将原HTML中错误的type="string"改为标准的type="text"。

样式复用 #

将原HTML中的styles.css内容直接复制到React项目的App.css文件中即可，无需额外修改。

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