javascript - 存储属于不同选项卡的文本区域的状态

Question

我正在尝试创建具有多个选项卡的内容，每个选项卡应包含自己的文本区域，以便在进出每个选项卡时保留其文本。我在渲染函数之前的代码是这样的

const panes = []

for(let i = 0 ; i < inputValue ; i++) {
  const formNumber = "Form: " + (i+1);

  panes.push({
    menuItem: "Form " + (i+1),
    key:{i},
    render: () => (
      <Tab.Pane >
        {i+1}
        <Form.TextArea
          onChange={this.onChange}
          key={i}
        />
      </Tab.Pane>
    )
  });
};

在渲染函数中:

<Tab
  grid={{ paneWidth: 12, tabWidth: 2}}
  menu={{ fluid: true, vertical: true, tabular: 'right' }}
  panes={panes} 
/>

更改选项卡时，选项卡 Pane 内呈现的 for 循环中的 i 值保持正确，但文本区域中的信息会丢失。我尝试将本地状态与下面的代码一起使用，然后使用 onChange 函数进行更新

this.state = {
  forms: [{
    formNumber: 1,
    formText: ''
  }]
}

但是在将信息插入表单状态下的正确列表项时遇到问题。我还尝试创建一个不处于类似状态的列表

this.form_text = []

然后插入文本并为其分配表单文本区域的值，但这似乎是错误的方法

Answer 1

将 i 添加到 onChange 参数:

onChange={e => this.onChange(e, i)}

这样您就可以更新该州的正确表单:

onChange = (e, i) => {
  this.setState({
    forms: this.state.forms.map(it => {
      if (it.formNumber !== i) return it; // keep other forms as is

      return { formNumber: i, formText: e.target.value };
    })
  });
};