CODEWITHSUNDEEP
reactjs
Stepan Suvorov
Stepan Suvorov

Reputation: 26236

How to disable a button when an input is empty?

I'm trying to disable a button when an input field is empty. How can I do this in React?

I'm doing something like the following:

<input ref="email"/>

<button disabled={!this.refs.email}>Let me in</button>

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.

Upvotes: 190

Views: 331758

Answers (7)

fruitloaf
fruitloaf

Reputation: 2930

<button disabled={false}>button WORKS</button>
<button disabled={true}>button DOES NOT work</button>

Now just use useState or any other condition to pass true/false into the button, assuming you are using React.

Upvotes: 0

Noumenon
Noumenon

Reputation: 6452

Another option to "disable" the button which doesn't require tracking state or explaining to the user why the button is grayed out, is to use the HTML5 required attribute on the input so the button will not submit. docs

<input type="text" required />

enter image description here

Upvotes: -1

Jarrod Naidoo
Jarrod Naidoo

Reputation: 29

const Example = () => {
  
const [value, setValue] = React.useState("");

function handleChange(e) {
    setValue(e.target.value);
  }

return (


<input ref="email" value={value} onChange={handleChange}/>
<button disabled={!value}>Let me in</button> 

);

}
 
export default Example;

Upvotes: 2

Marc Sloth Eastman
Marc Sloth Eastman

Reputation: 801

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 = () => 
  // condition check

This works: 

<button
  type="button"
  disabled={this.isDisabled()}
>
  Let Me In
</button>

but this will not work:

<button
   type="button"
   disabled={this.isDisabled}
>
  Let Me In
</button>

Upvotes: 9

keerthi c
keerthi c

Reputation: 71

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 > 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 (
             <div>
                <input
                   placeholder={"ANY_PLACEHOLDER"}
                   onChange={this.handleChangePassword}

                  />

               <button 
               onClick ={this.someFunction}
               disabled = {this.state.isEnable} 
              /> 

             <div/>
            )

       }

   }

Upvotes: -2

Gi1ber7
Gi1ber7

Reputation: 682

Using constants allows to combine multiple fields for verification:

class LoginFrm extends React.Component {
  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
    };
  }
  
  handleEmailChange = (evt) => {
    this.setState({ email: evt.target.value });
  }
  
  handlePasswordChange = (evt) => {
    this.setState({ password: evt.target.value });
  }
  
  handleSubmit = () => {
    const { email, password } = this.state;
    alert(`Welcome ${email} password: ${password}`);
  }
  
  render() {
    const { email, password } = this.state;
    const enabled =
          email.length > 0 &&
          password.length > 0;
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Email"
          value={this.state.email}
          onChange={this.handleEmailChange}
        />
        
        <input
          type="password"
          placeholder="Password"
          value={this.state.password}
          onChange={this.handlePasswordChange}
        />
        <button disabled={!enabled}>Login</button>
      </form>
    )
  }
}

ReactDOM.render(<LoginFrm />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>


</body>

Upvotes: 13

Jonny Buchanan
Jonny Buchanan

Reputation: 62813

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 <your app's state management solution here> 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:

<meta charset="UTF-8">
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function() { "use strict";

var App = React.createClass({
  getInitialState() {
    return {email: ''}
  },
  handleChange(e) {
    this.setState({email: e.target.value})
  },
  render() {
    return <div>
      <input name="email" value={this.state.email} onChange={this.handleChange}/>
      <button type="button" disabled={!this.state.email}>Button</button>
    </div>
  }
})

React.render(<App/>, document.getElementById('app'))

}()</script>

Upvotes: 283

Related Questions