如何使用bootstrap禁用输入反应？

Question

我在窗体上有2个输入。我正在使用React.js和Twitter Bootstrap。

预期的行为是：

当输入键入在在任一形式的输入字段，另一个输入字段应不接受任何输入（或是disabled）。

我从Bootstrap使用FormControl。

我应该如何在这个React.js/Bootstrap设置中实现这个功能？

Answer 1

您必须使用disabled属性并根据需要进行切换。如果我理解正确，你需要类似的东西。

class MyForm extends React.Component{ 
    constructor(){ 
    super(); 
    this.state = { 
     isFirstDisabled: false, 
     isSecondDisabled: false 
    } 
    } 
    onFirstFocus(){ 
    this.setState({ 
     isSecondDisabled: true 
    }); 
    } 
    onSecondFocus(){ 
    this.setState({ 
     isFirstDisabled: true 
    }); 
    } 
    onBlur(){ 
    this.setState({ 
     isFirstDisabled: false, 
     isSecondDisabled: false 
    }); 
    } 
    render(){ 
    return (
     <div> 
      <FormGroup> 
      <FormControl type="text" onFocus={() => this.onFirstFocus()} onBlur={() => this.onBlur()} disabled={this.state.isFirstDisabled}/> 
      <FormControl type="text" onFocus={() => this.onSecondFocus()} onBlur={() => this.onBlur()} disabled={this.state.isSecondDisabled}/> 
      </FormGroup> 
     </div> 
    ); 
    } 
} 

export default MyForm; 

https://codesandbox.io/s/yPBvrOvKg