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

2024-05-07 • 问答

事情并不重要，因为我也在jsfiddle中进行尝试，因此排除了不是React.JS导致表单无法填充的情况。
我有文件中的数据。它应为json格式，目标是合并（填充）表单字段这是一个小玩意儿：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”的形式，这需要吗？

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

它主要用于发送表单数据，但可以使用独立于表格以传输键控数据。的传输的数据格式与表单的Submit（）方法相同如果表单的编码类型设置为，则将用于发送数据 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]);
  }

示例JSON

const data = {
    family1Name: "Jack",family1Relationship: "None",family1Phone: "999"
  };

将下面的jsx放在您的<form></form>标签中，非常简单

{Object.keys(data).map(k => (
      <div className="form-group">
        <label htmlFor={k}>{k}</label>
        <input
          type="text"
          className="form-control"
          name={k}
          id={k}
          value={data[k]}
        />
      </div>
    ))}

这是输出

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

zwx_malei 回答：需要从json数据填写表单数据。没有出现

大家都在问