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

Question

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

预期的行为是:

当在任一表单输入字段中输入输入内容时，另一个输入字段不应接受任何输入(或被禁用)。

我正在使用 Bootstrap 中的 FormControl。

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

Answer 1

您必须使用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