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 · Answer

Using constants allows to combine multiple fields for verification:

_x000D_

class LoginFrm extends React.Component {_x000D_
  constructor() {_x000D_
    super();_x000D_
    this.state = {_x000D_
      email: '',_x000D_
      password: '',_x000D_
    };_x000D_
  }_x000D_
  _x000D_
  handleEmailChange = (evt) => {_x000D_
    this.setState({ email: evt.target.value });_x000D_
  }_x000D_
  _x000D_
  handlePasswordChange = (evt) => {_x000D_
    this.setState({ password: evt.target.value });_x000D_
  }_x000D_
  _x000D_
  handleSubmit = () => {_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 > 0 &&_x000D_
          password.length > 0;_x000D_
    return (_x000D_
      <form onSubmit={this.handleSubmit}>_x000D_
        <input_x000D_
          type="text"_x000D_
          placeholder="Email"_x000D_
          value={this.state.email}_x000D_
          onChange={this.handleEmailChange}_x000D_
        />_x000D_
        _x000D_
        <input_x000D_
          type="password"_x000D_
          placeholder="Password"_x000D_
          value={this.state.password}_x000D_
          onChange={this.handlePasswordChange}_x000D_
        />_x000D_
        <button disabled={!enabled}>Login</button>_x000D_
      </form>_x000D_
    )_x000D_
  }_x000D_
}_x000D_
_x000D_
ReactDOM.render(<LoginFrm />, document.body);

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>_x000D_
<body>_x000D_
_x000D_
_x000D_
</body>

_x000D_

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

User · 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

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

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

Examples related to reactjs