React 表單提交給 MTurk

Question

這是一個 React onclick 方法，它應該設置一個提交給 MTurk 的表單。 它應該設置一個文本輸入字段，名稱為“assignmentId”和一個假的硬編碼字符串值，將其附加到一個 POST 表單，並（盡管目前已被注釋掉）提交表單。

  const handleSurveyClick = () => {
    const urlParams = new URLSearchParams(window.location.search)
    const form      = document.createElement('form')
    form.action = (new URL('mturk/externalSubmit', urlParams.get('turkSubmitTo'))).href
    form.method = 'post'

    const inputAssignmentId = document.createElement('input')
    inputAssignmentId.type  = 'text'
    inputAssignmentId.name  = 'assignmentId'
    inputAssignmentId.value = 'fake hardcoded number'
    form.appendChild(inputAssignmentId)

    document.body.appendChild(form)  // <------ See Below
//    form.submit()
  }

在 chrome 中，當我檢查控制台以查看表單時，這是我得到的：

form: <form action=​"https:​/​/​workersandbox.mturk.com/​mturk/​externalSubmit" method=​"post">
​  <input type=​"text" name=​"assignmentId">
​</form>​

至關重要的是，該輸入字段中沒有值字段。 奇怪的是，當document.body.appendChild(form)行執行時，假的硬編碼數字會顯示在我試圖提交表單的 web 頁面上。

我到底做錯了什么？

Answer 1

不是規定性的，但是您當前的解決方案並沒有很好地利用 React 的聲明性功能，所以我想從那里開始。 React 是一個聲明式前端庫，如果您想以命令式方式編寫代碼並自己向 DOM 添加節點，最好使用 vanilla Javascript。 使用 React 時自己向 DOM 添加節點通常會產生一些有趣的效果，這使得你的問題“我做錯了什么”很難回答，除了說你的代碼對於 React 來說有點反直覺。

如果我要以一種可行的方式更改您的解決方案，並利用 React 的功能，我會這樣做：

設置一個SurveyForm組件：

// survey-form.jsx
import React from 'react';

const SurveyForm = ({ urlParams, action }) => {
  return (
    <form method='post' action={action}>
      <input type='text' name='assignmentId' defaultValue='fake hardcoded number' />
      <button type='submit'>Submit</button>
    </form>
  );
}

然后，每當單擊調查時，我都會以所需的方式有條件地呈現您的SurveyForm 。 關於條件渲染的文檔

當你渲染它時，你必須給它我在組件中使用的相應道具。