twitter-bootstrap 如何使用引导程序在反应中禁用输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44914639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make input disabled in react using bootstrap?
提问by SB-1994
I have 2 inputs on the form. I am using React.js and Twitter Bootstrap.
我在表单上有 2 个输入。我正在使用 React.js 和 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).
当在任一表单输入字段中输入输入时，另一个输入字段不应接受任何输入（或为disabled）。
I am using FormControl from Bootstrap.
我正在使用 Bootstrap 中的 FormControl。
How should I achieve this in this React.js/Bootstrap setting?
我应该如何在这个 React.js/Bootstrap 设置中实现这一点？
回答by Andrew
You have to use disabledproperty. You can do something like this:
你必须使用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;
