// components/FormSection.jsximport { useState } from 'react';const FormSection = ({ generateResponse }) => {const [newQuestion, setNewQuestion] = useState('');return (// Form to submit a new question)}export default FormSection;
接下来，你可以把的值分配给状态，并创建一个()事件，在输入值发生变化时更新状态：
setNewQuestion(e.target.value)}>
最后，你可以创建一个()事件，在提交按钮被点击时加载一个函数 。这个方法将在App.js文件中创建，并作为props传入.jsx组件中，其参数为和值 。
generateResponse(newQuestion, setNewQuestion)}>Generate Response
你现在已经创建了一个状态来存储和更新表单的值，添加了一个方法，该方法作为道具从App.js文件中传递，并处理了点击事件 。这就是最终代码的模样：
// components/FormSection.jsximport { useState } from 'react';const FormSection = ({ generateResponse }) => {const [newQuestion, setNewQuestion] = useState('');return ( setNewQuestion(e.target.value)}> generateResponse(newQuestion, setNewQuestion)}>Generate Response )}export default FormSection;
下一步将是在App.js文件中创建一个方法来处理与 API互动的整个过程 。
与 API交互
要与 API互动并在React应用程序中获得API密钥，你必须创建一个 API账户 。你可以使用你的谷歌账户或电子邮件在网站上注册一个账户 。要生成API密钥，点击网站右上角的；会出现一些选项；点击View API keys 。
点击 newkey按钮，将密匙复制到某个地方，因为你会在这个应用程序中使用它来与进行交互 。现在你可以通过导入包（你已经安装了）和配置方法来初始化 。然后用你生成的密钥创建一个配置，用它来初始化 。
// src/App.jsimport { Configuration, OpenAIApi } from 'openai';import FormSection from './components/FormSection';import AnswerSection from './components/AnswerSection';const App = () => {const configuration = new Configuration({apiKey: process.env.REACT_APP_OPENAI_API_KEY,});const openai = new OpenAIApi(configuration);return (// Render FormSection and AnswerSection);};export default App;
在上面的代码中，的API密钥被存储为.env文件中的一个环境变量 。你可以在你的应用程序的根目录下创建一个.env文件，并将密钥存储到变量_KEY 。
// .envREACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…
现在你可以继续在App.js文件中创建方法，并传入你已经创建的表单中预期的两个参数，以处理请求并从API获得响应 。
// src/App.jsimport FormSection from './components/FormSection';import AnswerSection from './components/AnswerSection';const App = () => {const generateResponse = (newQuestion, setNewQuestion) => {// Set up OpenAI API and handle response};return (// Render FormSection and AnswerSection);};export default App;
你现在可以向 API发送请求 。API可以执行许多操作，如问答（Q&A）、语法纠正、翻译等等 。对于这些操作中的每一项，其选项都是不同的 。例如，问答的引擎值是text--00，而SQL翻译的引擎值是code--002 。请随时查看的例子文档，了解各种例子和它们的选项 。
在本教程中，我们只使用Q&A，这是选项的样子：
{model: "text-davinci-003",prompt: "Who is Obama?",temperature: 0,max_tokens: 100,top_p: 1,frequency_penalty: 0.0,presence_penalty: 0.0,stop: ["\"],}