javascript - 需要从json数据中填写表单数据。没有出现

Question

事情并不重要，因为我也在用 jsfiddle 尝试这个，因此排除了不是 React.JS 导致表单无法填写。
我有来自文件的数据。它应该是 json 格式，目标是填充(填充)表单字段 这是它的一个 fiddle :https://jsfiddle.net/vp5kLxgs/

虽然使用一些 map 函数或表单的 ID 会很好，但我会满足于任何只会在表单上循环的东西。如果需要，我可以更改表格 我计划拥有 ID 和姓名

形式:

<form id="importantForm" role="form" onSubmit={this.handleSubmit}>
    <div className="form-group">
          <label htmlFor="family1 Name">
            Family1 Name
          </label>
          <input type="text" className="form-control" name="family1Name" id="family1Name" />
    .... // etc....
 </form>

JavaScript:

//document.getElementById("family1Name").value = "jack"

var json = {family1Name: "jack", family1Relationship: "", family1Phone: ""};

var form_data = new FormData();

for ( var key in json ) {
   form_data.append(key, json[key]);
   console.log('key', key)
   console.log('impor..[key]', json[key])
}

使用有效的 document.getElementById 手动设置 family1Name... 但循环数据不会填充表单字段。

通过 console.log 我可以看到键和值，但我不知道 formdata 应该如何知道使用我的 id="importantForm"表单，是否需要？

Answer 1

FormData() 并不是一种在数据结构和表单之间绑定(bind)数据的方法。这就是创建 UI 框架/库(React、Vue、Angular 等)的目的。 FormData 旨在提供一种构建数据结构的方法，该数据结构可以是 easily submitted to the backend :

It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data

但是，手动设置表单字段值非常简单:

var json = {family1Name: "jack", family1Relationship: "brother", family1Phone: "00045555000"};

var form = $("#importantForm");

for (var key in json) {
    var selector = `input[name="${ key }"], textarea[name="${ key }"]`
    var input = $(form).find(selector)  
    input.val(json[key]);
  }