Deactivate input in react with a button click

Question

I have this basic component and I want the textfield to be deactivated or activated whenever I click on a button. How can I achieve this?

This is my sample code:

import React from "react";
import Button from 'react-button'

const Typing = (props) => {
    var disabled = "disabled";
    var enabled = !disabled;

  const handleUserInput = (event) => props.onUserInput(event.target.value);
  const handleGameClik = (props) => {

      disabled = enabled;
  }
  return(
      <div>

          <input
              className = "typing-container"
              value = {props.currentInput}
              onChange = {handleUserInput}
              placeholder=" ^__^ "
              disabled = {disabled}/>
          <Button  onClick = {handleGameClik}> Start Game  </Button>
          <Button> Fetch Data </Button>

          </div>
          );
};

You need to store `disable` variable in component `state` and change it there. When you change the state of the component, the `render` method will invoke and refresh the component. — Ali Sepehri.Kh, Apr 21 '16 at 16:26

score 62 · Accepted Answer · answered Apr 21 '16 at 18:42

62

A simplified solution using state could look like this:

class Typing extends React.Component {
  constructor(props) {
    super(props);
    this.state = { disabled: false }
  }
  handleGameClik() {
    this.setState( {disabled: !this.state.disabled} )
  } 
  render() {
    return(
        <div>
          <input
                className = "typing-container"
                placeholder= " type here "
                disabled = {(this.state.disabled)? "disabled" : ""}/>
          <button  onClick = {this.handleGameClik.bind(this)}> Start Game  </button>
          <button> Fetch Data </button>
        </div>
    );
  }
};

Working Codepen here.

answered Apr 21 '16 at 18:42

wintvelt

13,855
3
38
43

38

You do not need to do `{(this.state.disabled)? "disabled" : ""}` when a prop is false || null it is automatically ommited. `disabled={this.state.disabled}` is enough. – Foxhoundn Apr 21 '16 at 20:58
Besides, both `disabled="disabled"` and `disabled=""` mean the input is disabled in HTML. Boolean attributes are false when the attribute is removed, not set to an empty string. In fact, this answer should definitely be edited to remove that incorrect code. – Domino Nov 05 '20 at 06:53
@Domino I agree that my code could be a bit cleaner/ nicer, but it is not incorrect. you can see in the working codepen that the example code just works, so “disabled” and “” do not mean the same thing in react/jsx. Today, I would probably use hooks and something like ` – wintvelt Nov 05 '20 at 07:48
Ah, I see. React doesn't actually call `element.setAttribute("disabled", "")` but probably translates that into `element.disabled = ""` and the empty string is false. That sure is a quirk to keep in mind. – Domino Nov 05 '20 at 09:12

Second Son · Answer 2 · 2021-04-20T19:58:18.100

33

2019

Another option is to use, react-hooks' hook useState.

Edit: In a functional component

import React, {useState} from 'react';

function Typing(props) {
  const [disabled, setDisabled] = useState(false);

  function handleGameClick() {
    setDisabled(!disabled);
  }

  return (
    <div>
      <input
        className='typing-container'
        placeholder=' type here '
        disabled={disabled}
      />
      <button type='submit' onClick={handleGameClick}> Start Game </button>
      <button> Fetch Data </button>
    </div>
  );
}

edited Apr 20 '21 at 19:58

answered May 06 '19 at 13:10

Second Son

1,481
1
15
26

2

Or, if your `disabled` state depends on some other prop or state item, use [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo). – Paul Razvan Berg Nov 03 '19 at 17:08
1

react-hooks' hook -> functional component – Crisan Lucian Dec 13 '19 at 15:45
This is a better solution – Sarthak Bansal Oct 18 '21 at 10:34

score 10 · Answer 3 · answered Feb 18 '19 at 12:59

This might confuse you, but the guys at React.js actually rebuild every form component and made them look almost exactly like the native HTML component. There are some differences however.

In HTML you should disable an input field like this:

<input disabled="disabled" />

But in React.js you'll have to use:

<input disabled={true} />

The accepted example works because anything not 0 is considered true. Therefor "disabled" is also interpreted as true.

score -1 · Answer 4 · edited Sep 01 '21 at 19:16

-1

const [disabled , setDisabled] = useState(true) 
if(condition){ 
 setDisabled(false)
}else{ 
 setDisabled(true) 
} 
return
<TextField placeholder="Name" disabled={ disabled} />

edited Sep 01 '21 at 19:16

Paul Roub

36,322
27
84
93

answered Sep 01 '21 at 19:12

Prashanth R

11

2

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Greelings Sep 03 '21 at 10:01

Deactivate input in react with a button click

4 Answers4

** 2019 **

2019