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:
<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.
This question is related to
reactjs
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/>
)
}
}
Using constants allows to combine multiple fields for verification:
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);<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>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>
Source: Stackoverflow.com