How to disable a button when an input is empty

Question

I m new to React  I m trying to disable a button when an input field is empty  What is the best approach in React for this  I m doing something like the following   lt input ref  quot email quot   gt    lt button disabled   this refs email  gt Let me in lt  button gt   Is this correct  It s not just duplication of the dynamic attribute  because I m also curious about transferring checking the data from one element to another

User · Accepted Answer

You ll need to keep the current value of the input in state  or pass changes in its value up to a parent via a callback function  or sideways  or  lt your app s state management solution here gt  such that it eventually gets passed back into your component as a prop  so you can derive the disabled prop for the button   Example using state    x000D   x000D   lt meta charset  UTF-8  gt  x000D   lt script src  https   fb me react-0 13 3 js  gt  lt  script gt  x000D   lt script src  https   fb me JSXTransformer-0 13 3 js  gt  lt  script gt  x000D   lt div id  app  gt  lt  div gt  x000D   lt script type  text jsx harmony true  gt void function      use strict   x000D   x000D  var App   React createClass   x000D    getInitialState     x000D      return  email      x000D       x000D    handleChange e    x000D      this setState  email  e target value   x000D       x000D    render     x000D      return  lt div gt  x000D         lt input name  email  value  this state email  onChange  this handleChange   gt  x000D         lt button type  button  disabled   this state email  gt Button lt  button gt  x000D       lt  div gt  x000D      x000D     x000D   x000D  React render  lt App  gt   document getElementById  app    x000D   x000D      lt  script gt  x000D   x000D   x000D

User · Answer

Using constants allows to combine multiple fields for verification    x000D   x000D  class LoginFrm extends React Component   x000D    constructor     x000D      super    x000D      this state     x000D        email      x000D        password      x000D         x000D      x000D     x000D    handleEmailChange    evt    gt    x000D      this setState   email  evt target value     x000D      x000D     x000D    handlePasswordChange    evt    gt    x000D      this setState   password  evt target value     x000D      x000D     x000D    handleSubmit        gt    x000D      const   email  password     this state  x000D      alert  Welcome   email  password    password     x000D      x000D     x000D    render     x000D      const   email  password     this state  x000D      const enabled   x000D            email length  gt  0  amp  amp  x000D            password length  gt  0  x000D      return   x000D         lt form onSubmit  this handleSubmit  gt  x000D           lt input x000D            type  text  x000D            placeholder  Email  x000D            value  this state email  x000D            onChange  this handleEmailChange  x000D            gt  x000D           x000D           lt input x000D            type  password  x000D            placeholder  Password  x000D            value  this state password  x000D            onChange  this handlePasswordChange  x000D            gt  x000D           lt button disabled   enabled  gt Login lt  button gt  x000D         lt  form gt  x000D        x000D      x000D    x000D   x000D  ReactDOM render  lt LoginFrm   gt   document body   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt body gt  x000D   x000D   x000D   lt  body gt  x000D   x000D   x000D

User · Answer

its simple let us assume you have made an state full class by extending Component which contains following  class DisableButton extends Components              constructor                     super                now set the initial state of button enable and disable to be false           this state    isEnable  false                  this function checks the length and make button to be enable by updating the state      handleButtonEnable event                    const value   this target value           if value length  gt  0                          set the state of isEnable to be true to make the button to be enable           this setState  isEnable   true                                  in render you having button and input       render                       return                 lt div gt                   lt input                    placeholder   ANY PLACEHOLDER                      onChange  this handleChangePassword                       gt                   lt button                 onClick   this someFunction                 disabled    this state isEnable                   gt                  lt div  gt

User · Answer

Another way to check is to inline the function  so that the condition will be checked on every render  every props and state change    const isDisabled        gt        condition check   This works     lt button   type  button    disabled  this isDisabled     gt    Let Me In  lt  button gt    but this will not work    lt button    type  button     disabled  this isDisabled   gt    Let Me In  lt  button gt

[reactjs] How to disable a button when an input is empty?

Examples related to reactjs