reactjs 从API获取响应后无法编辑twitter字段中的响应

gg58donl  于 2023-04-29  发布在  React
关注(0)|答案(1)|浏览(114)
document.addEventListener('keydown', async function(event) {
  var target = event.target;

  //twitter

  if (target.tagName.toLowerCase() === 'div' && target.getAttribute('role') === 'textbox') {
    if (event.key === 'Enter') {
      var userInput = target.innerText;

      if (userInput.startsWith('/ai') && userInput.indexOf('/ai') === userInput.lastIndexOf('/ai')) {
        console.log('User input:', userInput);
        if (userInput) {
          const response = await fetch(`${API_URL}`, {
            method: "post",
            headers: {
              "Content-Type": "application/json",
              "Authorization": `Bearer ${key}`,
            },
            body: JSON.stringify({
              model: "text-davinci-003",
              prompt: userInput,
              max_tokens: 1000
            })
          });
          const data = await response.json();
          console.log(`OpenAI API response →`, data);
  
          const output = data.choices[0].text;
          target.innerText = output;
        }
        else {
          console.error("Error");
        }
      }
    }
  }});

所以我们我得到的API响应完美地出现在Twitter的输入框,但在那之后,我无法编辑或修改API响应在输入字段这个浏览器扩展是在其他网站上工作正常,所以你们能帮我吗?
我想修改Twitter的输入字段后,API的响应来在Twitter的输入字段

0md85ypi

0md85ypi1#

看起来这个问题与添加到Twitter输入字段的内容有关,这使得它之后无法编辑。其中一个可能的原因可能是innerText属性被用来设置输入字段的内容,它可能会干扰输入字段的正常行为。
您可以尝试使用input事件以编程方式设置输入字段的内容,这样可以在以后编辑文本。下面是如何修改代码的示例:

document.addEventListener('keydown', async function(event) {
  var target = event.target;

  // Twitter
  if (target.tagName.toLowerCase() === 'div' && target.getAttribute('role') === 'textbox') {
    if (event.key === 'Enter') {
      var userInput = target.innerText;

      if (userInput.startsWith('/ai') && userInput.indexOf('/ai') === userInput.lastIndexOf('/ai')) {
        console.log('User input:', userInput);
        if (userInput) {
          const response = await fetch(`${API_URL}`, {
            method: "post",
            headers: {
              "Content-Type": "application/json",
              "Authorization": `Bearer ${key}`,
            },
            body: JSON.stringify({
              model: "text-davinci-003",
              prompt: userInput,
              max_tokens: 1000
            })
          });
          const data = await response.json();
          console.log(`OpenAI API response →`, data);
  
          const output = data.choices[0].text;

          // Trigger the input event to set the content of the input field
          const inputEvent = new InputEvent('input', {
            bubbles: true,
            cancelable: true,
          });
          target.textContent = output;
          target.dispatchEvent(inputEvent);
        }
        else {
          console.error("Error");
        }
      }
    }
  }
});

通过在设置内容后调度输入事件,您应该能够在向输入字段添加API响应后编辑该字段中的文本。

相关问题