Building Enterprise JavaScript Applications

Disabling the Button component

To make the user experience more intuitive, let's disable the Register button until both the email and password fields are valid. To do that, we need to provide a way for the RegistrationForm component to not just read the values of the Input components when the form is submitted, but after each time the value has changed.

A naive approach would be to poll the valid state of each component every 100 ms or so, but that will not be performant. Instead, we can pass a function (via the onChange prop) into the Input component that will get called whenever the value of the Input changes.

<Input label="Email" type="email" ref={this.email} onChange={this.handleInputChange} /><Input label="Password" type="password" ref={this.password} ...