React |如何将输入的值插值到API调用中

import React, { useState } from 'react';

const MyComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={() => handleAPICall(inputValue)}>调用API</button>
    </div>
  );
};

const handleAPICall = (inputValue) => {
  // 在这里执行API调用，并将输入值作为参数传递给API
  // 例如使用fetch函数发送GET请求
  fetch(`https://api.example.com/data?input=${inputValue}`)
    .then((response) => response.json())
    .then((data) => {
      // 处理API响应数据
    })
    .catch((error) => {
      // 处理错误
    });
};