Reputation: 26236
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
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
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 />
Upvotes: -1
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
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
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
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
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