reactjs - 如何在反应中将值绑定到动态控件

Question

我通过进行 2 个 api 调用来动态加载表单控件。第一个 api 获取表单控件的列表，第二个 api 获取先前加载的控件的数据。前半部分工作正常，我能够动态加载控件，

架构：

[{ id: 1, input: 'TextBox'},
 { id: 2, input: 'TextArea'}]

代码：

fields.map((type: any, i: any) => {
  switch (type.input) {
   case 'TextBox':
   return (<input type="text" id={type.id}> />)
   case 'TextArea':
   return (<textarea itemType="text" id={type.id}> />)}});

上面的代码工作正常，我能够创建表单控件。

下一部分是将值绑定到动态控件，我进行另一个 API 调用来获取数据，我应该映射 id 字段并绑定数据

架构：

[{ id: 1, value: 'testTextBox'},
 { id: 2, value: 'testTextArea'}]

我现在如何将数据绑定到控件？我尝试过使用状态，但无法实现。或者我可以在获得第二个 api 响应后更新第一个模式并为其添加值键，如下所示，

 fields = [{ id: 1, input: 'TextBox', value: 'testTextBox'},
     { id: 2, input: 'TextArea', value: 'testTextArea'}]

请建议如何循环并将值键添加到字段数组？

标签： reactjstypescriptreact-native

Answer 1

使用：setState({})

创建绑定到状态的控件：

(<input type="text" id={type.id}> value={this.state.id}/>)

收到值后，将其设置为以下状态：

this.setState({id: value});