Reputation: 5367
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