如何使用react应用程序中的按钮翻译文本？

npm install react react-dom react-scripts

import React, { useState } from 'react';
import axios from 'axios';

const TranslationButton = () => {
  const [translatedText, setTranslatedText] = useState('');
  // 其他代码
}

const translateText = () => {
  // 发送翻译请求的代码
}

<button onClick={translateText}>翻译</button>

const translateText = () => {
  axios.get('翻译API的URL', {
    params: {
      text: '待翻译的文本',
      // 其他参数
    }
  })
  .then(response => {
    const translatedText = response.data.translatedText;
    setTranslatedText(translatedText);
  })
  .catch(error => {
    console.error('翻译请求失败:', error);
  });
}

return (
  <div>
    <button onClick={translateText}>翻译</button>
    <p>{translatedText}</p>
  </div>
);