Fluent UI切换Pivot时表单字段值重置问题求助

Fluent UI的Pivot组件默认会卸载未激活的PivotItem，导致内部表单组件的状态跟着丢失，所以切换标签页时输入值会重置。要解决这个问题，你需要把表单字段改成受控组件，用父组件的状态统一管理所有字段值，不管子组件是否卸载，状态都能保留。

下面是修改后的完整代码：

const {
  Fabric,
  Pivot,
  PivotItem,
  TextField,
  PrimaryButton,
  Stack
} = window.FluentUIReact;

const Demo = () => {  
  // 用useState保存所有表单字段的值
  const [formValues, setFormValues] = React.useState({
    name: '',
    email: ''
  });

  // 统一处理输入变化，更新对应字段的状态
  const handleInputChange = (fieldName, newValue) => {
    setFormValues(prev => ({
      ...prev,
      [fieldName]: newValue
    }));
  };

  return (
    <Fabric>
     <form>
      <Pivot aria-label="Basic Pivot Example">
        <PivotItem headerText="My Files">
            <Stack tokens={{ childrenGap: 10 }}>
              <TextField 
                label="Name" 
                required 
                value={formValues.name}
                onChange={(e, newValue) => handleInputChange('name', newValue)}
              />
              <TextField 
                label="Email" 
                type="email" 
                required 
                value={formValues.email}
                onChange={(e, newValue) => handleInputChange('email', newValue)}
              />
              <PrimaryButton 
                text="Submit" 
                onClick={() => {
                  alert(`表单已提交！姓名：${formValues.name}，邮箱：${formValues.email}`);
                }} 
              />
            </Stack>
        </PivotItem>
        <PivotItem headerText="Recent">
          Pivot #2
        </PivotItem>
        <PivotItem headerText="Shared with me">
          Pivot #3
        </PivotItem>
      </Pivot>
      </form>
    </Fabric>
  );
}

ReactDOM.render(<Demo />, document.getElementById('container'));

关键说明： #

• 之前的TextField是非受控组件，值存在自身内部状态，当PivotItem被卸载时，组件销毁，状态也跟着消失
• 修改后变成受控组件，所有字段值由父组件的formValues状态管理，即使PivotItem卸载，状态依然保存在Demo组件中
• 切换标签页时，TextField会从formValues中读取最新值，自然不会重置

如果后续其他标签页也需要添加表单字段，只需要在formValues里新增对应字段，然后给TextField绑定对应的value和onChange即可。

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