Ionic 4 + React, how do you get value of IonInput?

Ionic Framework ionic-v3
1

I’m using IonInput in my project like this:

<IonInput 
                  placeholder="Your Email" 
                  pattern="email" 
                  type="email" 
                  value={this.state.inputEmail}
                  onIonInput={this.handleResetEmailChange}
                  id="resetEmail"
                  required >
</IonInput>

I’m wondering what’s the best way to get the value of the input box. Since I’m using React, the [(ngModel)]="resetEmail" suggestions I found online won’t work as it’s for Angular.

I found a dirty workaround way to get my value since it’s using the standard input tag, this is what I’m doing now:

const inputVal:any= document.getElementById ("resetEmail")!.getElementsByTagName("input")[0].value;

Is there other cleaner way to get the value instead of using DOM traverse and selector?

Thanks!

1 Like
2

Well, I solve my on problem, that is to use the onIonChange to call a function to update the state of the React component like this:

 <IonInput 
                  placeholder="Your Email" 
                  pattern="email" 
                  type="email" 
                  value={this.state.inputEmail}
                  onIonInput={this.handleResetEmailChange}
                  onIonChange={(e) => this.inputEmail((e.target as HTMLInputElement).value)}
                  id="resetEmail"
                  required ></IonInput>

I’m using TypScript hence the need to declare e.target as HTMLInputElement

2 Likes