Question

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

预期的行为是：

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

我正在使用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

如何使用bootstrap使输入禁用？

1 个答案: