MUI选项卡切换丢失输入内容：是否因懒加载导致？如何修复？

我基于React的MUI库实现选项卡界面，两个选项卡面板各包含一个<input type="text" />输入框。切换选项卡时，用户在输入框中输入的数据会丢失——例如在“Item One”选项卡输入内容后切换到“Item Two”，再切回“Item One”时，之前输入的内容已消失。这是由懒加载导致的吗？该如何修复？

现有代码 #

import * as React from 'react';
import PropTypes from 'prop-types';
import SwipeableViews from 'react-swipeable-views';
import { useTheme } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`full-width-tabpanel-${index}`}
      aria-labelledby={`full-width-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.number.isRequired,
  value: PropTypes.number.isRequired,
};

function a11yProps(index) {
  return {
    id: `full-width-tab-${index}`,
    'aria-controls': `full-width-tabpanel-${index}`,
  };
}

export default function FullWidthTabs() {
  const theme = useTheme();
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleChangeIndex = (index) => {
    setValue(index);
  };

  return (
    <Box sx={{ bgcolor: 'background.paper', width: 500 }}>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="secondary"
          textColor="inherit"
          variant="fullWidth"
          aria-label="full width tabs example"
        >
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
        </Tabs>
      </AppBar>
      <SwipeableViews
        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
        index={value}
        onChangeIndex={handleChangeIndex}
      >
        <TabPanel value={value} index={0} dir={theme.direction}>
          <input type="text" />
        </TabPanel>
        <TabPanel value={value} index={1} dir={theme.direction}>
          <input type="text" />
        </TabPanel>
      </SwipeableViews>
    </Box>
  );
}

原因分析 #

确实和**条件渲染（类懒加载逻辑）**有关。你的TabPanel组件中，只有当value === index（当前选中选项卡索引与面板索引一致）时，才会渲染面板内的子元素（包括输入框）。切换选项卡时，非当前面板的输入框会被React卸载；再次切回时，输入框重新挂载，自然丢失之前的输入内容。

修复方案 #

方案1：使用受控组件（推荐） #

将输入框的状态提升到父组件统一管理，无论输入框是否被卸载，状态都会保存在父组件中，切换选项卡时内容不会丢失。

修改后的FullWidthTabs组件代码：

export default function FullWidthTabs() {
  const theme = useTheme();
  const [value, setValue] = React.useState(0);
  // 新增：管理两个输入框的内容状态
  const [inputValues, setInputValues] = React.useState(['', '']);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleChangeIndex = (index) => {
    setValue(index);
  };

  // 新增：处理输入框内容变化
  const handleInputChange = (index, event) => {
    const newValues = [...inputValues];
    newValues[index] = event.target.value;
    setInputValues(newValues);
  };

  return (
    <Box sx={{ bgcolor: 'background.paper', width: 500 }}>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="secondary"
          textColor="inherit"
          variant="fullWidth"
          aria-label="full width tabs example"
        >
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
        </Tabs>
      </AppBar>
      <SwipeableViews
        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
        index={value}
        onChangeIndex={handleChangeIndex}
      >
        <TabPanel value={value} index={0} dir={theme.direction}>
          {/* 绑定value和onChange事件 */}
          <input 
            type="text" 
            value={inputValues[0]} 
            onChange={(e) => handleInputChange(0, e)} 
          />
        </TabPanel>
        <TabPanel value={value} index={1} dir={theme.direction}>
          <input 
            type="text" 
            value={inputValues[1]} 
            onChange={(e) => handleInputChange(1, e)} 
          />
        </TabPanel>
      </SwipeableViews>
    </Box>
  );
}

方案2：保持组件挂载（仅隐藏不卸载） #

修改TabPanel组件，去掉条件渲染逻辑，始终渲染面板内容，仅通过hidden属性控制显示/隐藏。这样输入框不会被卸载，内部状态会保留。

修改后的TabPanel组件代码：

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`full-width-tabpanel-${index}`}
      aria-labelledby={`full-width-tab-${index}`}
      {...other}
    >
      {/* 去掉条件渲染，始终渲染内容 */}
      <Box sx={{ p: 3 }}>
        <Typography>{children}</Typography>
      </Box>
    </div>
  );
}

注意：这个方案优点是实现简单，但如果面板包含复杂组件或大量DOM元素，会一直占用内存和DOM资源，可能影响性能，适合轻量内容的场景。

内容的提问来源于stack exchange，提问作者sshussain270