Question

我有一个API，它返回一个对象，我将其存储在组件状态为'content'。我使用此状态预先填充输入字段页面。用户可以对这些输入进行更改，从而改变我的状态。提交表单只需将此新内容对象传递给保存API，然后保存更改。

一个简单的函数侦听输入onChange事件，然后根据输入的名称改变我的状态（取自Cory House在Pluralsight上的React教程）：

updateContentState = (e) => {
  const field = e.target.name;
  const content = Object.assign({}, this.state.content);
  content[field] = e.target.value;
  this.setState({ content });
}

<ManageContentForm
  onChange={this.updateContentState}
  content={this.state.content}
/>

我会在ManageContentForm组件中调用此函数，如下所示：

<TextInput
  name="title"
  label="Title"
  value={content.title}
  onChange={onChange}
/>

这适用于顶级键/值对，但我有一个main_content键，其中包含一个对象数组。尽管顶级键值/值始终存在，但main_content内部的数据是自由形式的（用户可以单击按钮添加新标题，段落，手风琴，项目符号等），因此有时这将是空的，有时它会有一大堆物体。这是我的JSON的一个例子。

title: '',
summary: '',
main_content: [
  {
    data: 'Notes',
    type: 'heading',
  },
  {
    data: [
      {
        detail: '',
        title: '',
      },
    ],
    type: 'accordion',
  },
],

假设我有一个文本输入用于更改'detail'键中的值，与顶级键/值对相同的方法不起作用...

<TextInput
  name="main_content[1].data.title"
  label="Accordian Title"
  value={content.main_content[1].data.title}
  onChange={onChange}
/>

可能值得注意的是我使用.map遍历main_content中的对象，因此我可以访问每个特定对象的索引。

Answer 1

编写一种方法直接将适当的数据插入/更新到主要内容
考虑分手＆＃34;主要内容＆＃34;如果需要，使其更容易访问

React - 根据用户输入设置对象状态

1 个答案: