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 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?

• javascript
• forms
• twitter-bootstrap
• reactjs

• I have 2 FormGroup <FormGroup controlId={this.props.id}> <ControlLabel>{this.props.label}</ControlLabel> <FormControl {...this.props} /> </FormGroup> – SB-1994 Commented Jul 4, 2017 at 22:19
• What do you mean by disabled? – Chris Happy Commented Jul 4, 2017 at 22:21
• use state isDisabled in first input then onKeyDown second you true the state – 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 bees disabled. – SB-1994 Commented Jul 5, 2017 at 7:02

1 Answer 1

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