javascript - 如何使用bootstrap在 react 中禁用输入？

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

预期的行为是：

在任何一个表单输入字段上键入输入时，另一个输入字段不应接受任何输入（或为disabled）。

我正在从Bootstrap使用FormControl。

我应该如何在此React.js / Bootstrap设置中实现这一目标？

最佳答案

您必须使用disabled属性。您可以执行以下操作：

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