how to make input disabled in react using bootstrap?

Question

I have 2 inputs on the form. I am using React.js and Twitter Bootstrap.

The intended behavior is:

When an input is typed in on either of the form input fields, another input field should not accept any input (or be disabled).

I am using FormControl from Bootstrap.

How should I achieve this in this React.js/Bootstrap setting?

I have 2 FormGroup <FormGroup controlId={this.props.id}> <ControlLabel>{this.props.label}</ControlLabel> <FormControl {...this.props} /> </FormGroup> — SB-1994
– SB-1994, Commented Jul 4, 2017 at 22:19
use state isDisabled in first input then onKeyDown second you true the state — Slim Shady
– Slim Shady, Commented Jul 4, 2017 at 22:25
I have 2 inputs and button and I can write information only in one input, the second becomes disabled. — SB-1994
– SB-1994, Commented Jul 5, 2017 at 7:02

Andrii Starusiev · Accepted Answer · 2018-09-10 10:20:40Z

3

You have to use disabled property. You can do something like this:

class MyForm extends React.Component{
  constructor(){
    super();
    this.state = {
      focused: undefined,
    }
  }
  onFocus(id){
    this.setState({
      focused: id
    });
  }
  onBlur(){
    this.setState({
      focused: undefined,
    });
  }
  render(){
    const { focused } = this.state;
    return (
        <div>
          <FormGroup>
            <FormControl type="text" onFocus={() => this.onFocus(1)} onBlur={this.onBlur} disabled={focused && focused !== 1}/>
            <FormControl type="text" onFocus={() => this.onSecondFocus(2)} onBlur={this.onBlur} disabled={focused && focused !== 2}/>
          </FormGroup>
        </div>
    );
  }
}

export default MyForm;

https://codesandbox.io/s/yPBvrOvKg

edited Sep 10, 2018 at 10:20

answered Jul 4, 2017 at 22:54

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

SB-1994 Over a year ago

Thank you/ And if I want to desabled input if the first input has some information? I have 2 inputs and button and I can write information only in one input

Andrii Starusiev Over a year ago

Just change onFocus to onChange and check there length of input value, if it's > 0 you disable another input, else enable. I have edited sandbox

SB-1994 Over a year ago

And if i have 2 components. in first i have method handleInputChange = inputId => event => { this.setState({ [inputId]: event.target.value }); }; and in second component i have in props this.state.input1 and this.state.input2. how in this case?

Andrii Starusiev Over a year ago

Could you ask by another way? I don't understand the last question, if it's question

SB-1994 Over a year ago

i have this situation codesandbox.io/s/Q2gp7Ky5 2 components(they are in index.js and Hello.js) and one method handleInputChange. How in this way?

|

Collectives™ on Stack Overflow

how to make input disabled in react using bootstrap?

1 Answer 1

7 Comments

Your Answer

Collectives™ on Stack Overflow

how to make input disabled in react using bootstrap?

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related