Question

我是React js的新手，在我的一个组件中，我正在动态设置字段名称，它从api到redux存储，然后从它们进入我的组件，

我想制作一个数组，可以通过Post方法传递给API，该数组将具有键值对，

这就是我构建动态字段的方式

        <Panel.Body key={index}>
        {
        this.buildTemplate(item,index)
        }
        </Panel.Body>

在buildTemplate（）中，我正在使用if else语句渲染html元素，并且在每个元素中我正在使用可以给出该字段的更改状态的函数。

 if (['url', 'text', 'title'].indexOf(role) >= 0) {
        return (
            <FormControl  type={role.toLowerCase()} placeholder={role} onChange={this.handleShareholderNameChange(id,item.label)}/>
        )
    } else if (['date'].indexOf(role) >= 0){
        return (
            <DatePicker id="from-date-dt" onChange={this.handleShareholderNameChange(id,item)}/>
        )

在我的handleShareholderNameChange

中

handleShareholderNameChange(id,item){
   var obj={}
   var array= []
   if(obj.id===undefined || obj[fieldName] === undefined){
       obj.id = id;
       obj[fieldName] = evt.target.value;
       array.push(obj);
   }
   if(obj.id === id){
       obj.id = id;
       obj[fieldName]= evt.target.value;
       array.push(obj);
   }
   console.log("array",array);
}

我希望每个输入数据都具有如下字段名称。

  array = [  { id:1, name:'abc', url:'xyz' },  { id:2, name:'abcd',
 url:'xyz2sqssqsq' }  ]

Answer 1

不可能动态加载所有JSON属性，构建它的方式看起来不错。但是总有片刻需要手动输入所有属性。将JSON对象加载到React组件中最动态的方法是使用ReactTable。

然后您可以执行以下操作：

<ReactTable data={[  { id:1, name:'abc', url:'xyz' },  { id:2, name:'abcd',
url:'xyz2sqssqsq' }  ]}
columns={[{"Header": "id", accessor: "id"}, {"Header": "name", accessor: "name"}, {"Header": "url", accessor: "url"}]}
/>

如何将每个字段名称及其各自的值动态添加到一个json对象中

1 个答案: