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)代码行执行时，假的硬编码数字会显示在我试图提交表单的网页上。

我到底做错了什么？

Answer 1

不是说明性的，但是您当前的解决方案并没有充分利用React的声明性特性，所以我想从这里开始。React是一个声明式的前端库，如果你想自己编写代码并将节点添加到DOM中，最好使用普通的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。Docs on conditional render

当你渲染它的时候，你必须给它相应的属性，就像我在组件中使用的一样。