单击任何其他选项卡时，React 选项卡 reset/clears 所有表单输入字段

Question

我想添加选项卡菜单，所以我决定使用 React Tabs。以下是代码的结构。问题是当我单击选项卡 2 时，选项卡 1 表单输入得到 reset/cleared。如果我单击选项卡 3，也会发生同样的情况，所有其他选项卡都会得到 reset/cleared。有什么办法可以防止这种情况发生吗？

<Tabs>
    <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
    </TabList>
    <TabPanel>
        <input type="text"/>
    </TabPanel>
    <TabPanel>
        <input type="text"/>
    </TabPanel>
    <TabPanel>
        <input type="text"/>
    </TabPanel>
</Tabs>

Answer 1

将您的代码更改为

<Tabs forceRenderTabPanel={true}>
<TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
</TabList>
<TabPanel>
    <input type="text"/>
</TabPanel>
<TabPanel>
    <input type="text"/>
</TabPanel>
<TabPanel>
    <input type="text"/>
</TabPanel>
</Tabs>

更多信息请查看https://github.com/reactjs/react-tabs#forcerendertabpanel-boolean

单击任何其他选项卡时，React 选项卡 reset/clears 所有表单输入字段

When clicking on any other tabs, React tabs reset/clears all form input fields

reactjs

react-tabs