语义 - 用户反应输入如果我从一个选项卡切换到另一个选项卡，则字段正在清除

Question

需要在更改tab后保持输入值。我认为每个选项卡窗格包含表单输入，如果我在选项卡之间切换，表单字段是清除，如何保存这些值。

import React from 'react'
import { Tab ,Input} from 'semantic-ui-react'

const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}><Input /></Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}></Tab.Pane> },
  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}></Tab.Pane> },
]

const TabExampleSecondaryPointing = () => (
  <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
)

export default TabExampleSecondaryPointing

有没有办法在标签更改后保持输入值。

Yess让它工作!!，这是代码

import React from 'react'
import { List, Label, Tab ,Input} from 'semantic-ui-react'

const panes = [
  { menuItem: 'Tab 1', pane: { key: 'tab1', content: <Input />, size: 'massive' } },
  { menuItem: 'Tab 2', pane: { key: 'tab2', content: 'This tab has a center aligned text', textAlign: 'center' } },
  { menuItem: 'Tab 3', pane: { key: 'tab3', content: <div>This tab contains an <Label>JSX</Label> element</div> } },
  { menuItem: 'Tab 4',
    pane: (
      <Tab.Pane key='tab4'>
        <p>This tab has a complex content</p>

        <List>
          <List.Item>Apples</List.Item>
          <List.Item>Pears</List.Item>
          <List.Item>Oranges</List.Item>
        </List>
      </Tab.Pane>
    ) },
]

const TabExampleContentShorthand = () => (
  <Tab panes={panes} renderActiveOnly={false} />
)

export default TabExampleContentShorthand

Answer 1

这是Tab组件的API的已知问题，默认情况下它只呈现当前活动选项卡。所以当你切换到另一个标签时，它会失去状态。

看看renderActiveOnly={false}的例子，它应该可以解决你的问题。