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}查看示例，它应该可以解决您的问题。

Answer 2

renderActiveOnly={false}仅在您在窗格对象中提供窗格内容时有效，因此，如果将渲染用于窗格内容，则renderActiveOnly={false}将不起作用。

示例（来自问题）

renderActiveOnly={false}不起作用：

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

renderActiveOnly={false}将起作用：

const panes = [
  { menuItem: 'Tab 1', pane: { key: 'tab1', content: <Input />, size: 'massive' } },
]

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

2 个答案: