Need help to have the handleSubmit triggered when user click on Tab

How can I have the handleSubmit be executed when the user click on a Tab (like a wizard?). I have tried this:

//this.state.flag can be set someway to decide what to execute

<Tabs activeKey={this.state.key}
  onSelect={this.state.flag ? this.handleSelect : 
  (handleSubmit(this.onSubmit.bind(this))}}
  id='mother-tab'
>

The problem is if I do that, It will not change the tab. And the onSubmit will not know (by the key) which is the tab as well.

Example:

onSubmit (values) {
  this.setState({
    name: values.name,
    surname: values.surname
})
//The handleSelect cannot be triggered here, it does not know the tab anymore
  this.handleSelect() // bad code
}

I have a live example: https://fastspider.github.io/ReduxFormTabs/ And the code is in: https://github.com/FastSpider/ReduxFormTabs

Is there a simple way to do that?

Here is the main code:

import React, {Component} from 'react'
import { Tabs, Tab, Button } from 'react-bootstrap'
import { Field, reduxForm } from 'redux-form'
import './styles.scss'

class Info extends Component {
  constructor (props) {
    super(props)
    this.state = { key: 1, name: '', error: false }
    this.handleSelect = this.handleSelect.bind(this)
  }
  handleSelect (key) {
    this.setState({key})
  }

  renderField (field) {
    const { meta: { touched, error } } = field
    const classStyle = `form-group ${touched && error ? 'has-danger' : ''}`
    return (
      <div className={classStyle}>
        <label>{field.label} </label>
        <input
          type='text'
          {...field.input}
        />
        {touched ? error : ''}
      </div>
    )
  }

  onSubmit (values) {
    // console.log(values)
    this.setState({
      name: values.name,
      surname: values.surname
    })
  }

  render () {
    const { handleSubmit } = this.props
    return (
      <div>
        <div className='info'>
          <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <Tabs activeKey={this.state.key}
              onSelect={this.handleSelect}
              id='mother-tab'
            >
              <Tab eventKey={1} title='Tab 1'>
                <Field
                  label='Type your name: '
                  name='name'
                  component={this.renderField}
              />
                <Button bsStyle='info' onClick={() => this.handleSelect(2)}> Next <b className='caret-right' /></Button>
              </Tab>
              <Tab eventKey={2} title='Tab 2'>
                <Field
                  label='Surname: '
                  name='surname'
                  component={this.renderField}
              />
                <Button bsStyle='primary' onClick={() => this.handleSelect(3)}> Next <b className='caret-right' /> </Button>
              </Tab>
              <Tab eventKey={3} title='Tab 3'>
                <p> Press Submit. </p>
                { /* Here I'm trying to have it already submitted by the tab Click */ }
                {this.state.name !== ''
                ? <h2>Hi {this.state.name} {this.state.surname}, Nice to Meet you! </h2> : ''}
                <button type='submit' className='btn btn-primary'>Submit</button>
              </Tab>
            </Tabs>
          </form>
        </div>
      </div>
    )
  }
}

function validate (values) {
  const errors = {}
  if (!values.name) {
    errors.name = 'Please enter your name'
  }

  if (!values.surname) {
    errors.surname = 'Please enter your surname'
  }
  return errors
}

export default reduxForm({
  validate,
  form: 'Info'
})(Info)

[gustavohenke]

I’ll close here since this is only a help request.

[borm]

Or you can create single form for each tab

<Tab eventKey={'1'} title='Tab 1'>
   <FirstTabForm ref={node => this.Form1 = node} />
</Tab>

and submit that on

handleSelect (key) {
  this.setState({key});
  this[`Form${key}`].submit();
}

...onSelect={this.handleSelect}