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

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} 
/>

在选项卡窗格内呈现的 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 };
    })
  });
};

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

Store state of text areas belonging to different tabs

javascript

state

reactjs

semantic-ui-react