如何在Form的onSubmit事件中将TabStrip选中项设为第一个标签页？

如何在Form的onSubmit事件中将TabStrip的“selected”标签页设置为第一个标签页？我需要调用tabStrip.setSelected(0)，但按照React的开发方式，不确定如何获取TabStrip的引用？

附原代码：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Field, Form, FormElement } from '@progress/kendo-react-form';
import { Button } from '@progress/kendo-react-buttons';

import {
  TabStrip,
  TabStripSelectEventArguments,
  TabStripTab,
} from '@progress/kendo-react-layout';

const App = () => {
  const [selected, setSelected] = React.useState<number>(2);

  const handleSelect = (e: TabStripSelectEventArguments) => {
    setSelected(e.selected);
  };

  const handleSubmit = (dataItem) => {
    alert("Submit OK");
  };

return (
    <Form
      onSubmit={handleSubmit}
      render={(formRenderProps) => (
        <div>
          <TabStrip selected={selected} onSelect={handleSelect}>
            <TabStripTab title="Tab 1 Title">
              <p>Tab 1 Content</p>
            </TabStripTab>
            <TabStripTab title="Tab 2 Title">
              <p>Tab 2 Content</p>
            </TabStripTab>
            <TabStripTab title="Tab 3 Title">
              <p>Tab 3 Content</p>
            </TabStripTab>
          </TabStrip>

          <span style={{ padding: 10 }}>
            <Button type={'submit'} icon="save" onClick={handleSubmit}>
              Save
            </Button>
          </span>
        </div>
      )}
    ></Form>
  );
};
ReactDOM.render(<App />, document.querySelector('my-app'));

方式一：通过状态控制（推荐的React范式） #

你已经通过useState维护了TabStrip的选中状态selected，完全不需要直接操作组件实例，直接在提交事件中更新状态即可：

修改handleSubmit函数，添加状态更新逻辑：

const handleSubmit = (dataItem) => {
  alert("Submit OK");
  setSelected(0); // 切换到第一个标签页
};

这种方式符合React单向数据流的设计理念，是更简洁、易维护的实现方式。

方式二：获取组件引用调用实例方法 #

如果确实需要调用TabStrip的setSelected实例方法，可以通过useRef获取组件引用：

1. 创建ref对象：

const tabStripRef = React.useRef<TabStrip>(null);

2. 将ref绑定到TabStrip组件：

<TabStrip ref={tabStripRef} selected={selected} onSelect={handleSelect}>

3. 在handleSubmit中调用实例方法：

const handleSubmit = (dataItem) => {
  alert("Submit OK");
  tabStripRef.current?.setSelected(0); // 调用实例方法切换标签页
};

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Field, Form, FormElement } from '@progress/kendo-react-form';
import { Button } from '@progress/kendo-react-buttons';

import {
  TabStrip,
  TabStripSelectEventArguments,
  TabStripTab,
} from '@progress/kendo-react-layout';

const App = () => {
  const [selected, setSelected] = React.useState<number>(2);

  const handleSelect = (e: TabStripSelectEventArguments) => {
    setSelected(e.selected);
  };

  const handleSubmit = (dataItem) => {
    alert("Submit OK");
    setSelected(0); // 切换到第一个标签页
  };

return (
    <Form
      onSubmit={handleSubmit}
      render={(formRenderProps) => (
        <div>
          <TabStrip selected={selected} onSelect={handleSelect}>
            <TabStripTab title="Tab 1 Title">
              <p>Tab 1 Content</p>
            </TabStripTab>
            <TabStripTab title="Tab 2 Title">
              <p>Tab 2 Content</p>
            </TabStripTab>
            <TabStripTab title="Tab 3 Title">
              <p>Tab 3 Content</p>
            </TabStripTab>
          </TabStrip>

          <span style={{ padding: 10 }}>
            <Button type={'submit'} icon="save">
              Save
            </Button>
          </span>
        </div>
      )}
    ></Form>
  );
};
ReactDOM.render(<App />, document.querySelector('my-app'));

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