1

I'm trying to develop multistep registration, referring this link : https://www.viget.com/articles/building-a-multi-step-registration-form-with-react

But I could not use refs and don't know how to fix this.

This is the error msg I get everytime I click on 'next' button error msg

and this is my code 

              <input type="text"
                     className='singleComponent'
                     name='AppName'
                     ref='AppName'
                     defaultValue={ this.props.fieldValues.AppName }
                     />

            <button>Cancel</button>
            <button onClick={this.SaveAndContinue}>Next</button>


  SaveAndContinue(e){
      e.preventDefault();

    var data={
        AppName : this.refs.AppName,
  }

    this.props.saveValues(data)
    this.props.nextStep()
  }

  }

Dependencies : 

"react": "^16.1.0",
"react-dev-utils": "^4.2.1",
"react-dom": "^16.1.0",

can someone help?

Thanks,

Soo Rhee
  • 19
  • 4

2 Answers2

0

While it may not be the exact cause of the issues you are seeing, it is recommended that you update from your implementation which uses string refs to a callback version.

So instead of: ref='AppName'

Use: ref={(input) => { this.AppName = input; }}

Then you will access the reference the element within AddApplicationField via: this.AppName

This may solve your issue since there are known issues with the legacy string ref method.

See more here: https://reactjs.org/docs/refs-and-the-dom.html

Scott
  • 3,736
  • 2
  • 26
  • 44
0

Problem solved by modifying button to :

    <button onClick={this.SaveAndContinue.bind(this)}>Next</button>
Soo Rhee
  • 19
  • 4