Does Not Work With Redux?

[jamalabo1]

hello,

i have used redux (connect) with ReactWizzard Step

and after that isValidated is not working.

class Step1 extends React.Component {
.... 
isValidated() {
return false;
}
... 

}

[einazare]

Hello @jamalabo1 ,

And thank you for your interest in using our products.
I am not able to answer your question since i haven't tried working with it and redux, maybe the community will come to your help.

Best,
Manu

[mytechstack]

Hi,

If you are using redux connect you need to set the withRef to true.

For eg.
connect(mapStateToProps, null, null, { withRef: true })(YourComponent);

The nextButtonClick needs to be modified to get the correct reference of the component using getWrappedInstance. You can then use this reference to invoke isValidated function. See modified code

nextButtonClick() {
let wrappedInst = this.refs[
this.props.steps[this.state.currentStep].stepName
].getWrappedInstance();

if (
  (this.props.validate &&
    ((wrappedInst.isValidated !== undefined && wrappedInst.isValidated()) ||
      wrappedInst.isValidated === undefined)) ||
  this.props.validate === undefined ||
  !this.props.validate
) {
  var key = this.state.currentStep + 1;
  this.setState({
    wizardData: {
      ...this.state.wizardData,
      ...this.refs[this.props.steps[this.state.currentStep].stepName].state
    },
    currentStep: key,
    nextButton: this.props.steps.length > key + 1 ? true : false,
    previousButton: key > 0 ? true : false,
    finishButton: this.props.steps.length === key + 1 ? true : false
  });
  this.refreshAnimation(key);
}

}