Black
Black

Reputation: 5367

How to set the 'selected' Tab of the TabStrip to the first tab in Form `onSubmit`

How can I set the 'selected' Tab of the TabStrip to the first tab in Form onSubmit?

i.e. I need to call tabStrip.setSelected(0), but in React methodology I'm not sure how to get a reference to the 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'));

Working example here: https://stackblitz.com/edit/react-mamtrq-6oshyg?file=app%2Fmain.tsx

Upvotes: 1

Views: 151

Answers (0)

Related Questions