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

标签 javascript forms twitter-bootstrap reactjs

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

预期的行为是:

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

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

关于javascript - 如何使用 Bootstrap 在 react 中禁用输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44914639/

相关文章:

php - CodeIgniter - 如何将表单中的值发布为 NULL 而不是 0

css - Bootstrap - 我们必须使用行和列吗?

javascript - 使用 JQuery Cookie 每周仅显示一次 Bootstrap 模态

javascript - 如果导入 bootstrap css 到 liferay 会出错

javascript - fullcalendar 选择时间未正确显示

javascript - 如何为 Firefox xpi 文件生成哈希值?

c++ - 如何将 Windows 窗体应用程序 (C++) 设置为具有 Aero/Glass 背景?

php - 第一个表单提交插入行随后提交更新同一行

javascript - 如何使用 Aurelia.io 增强服务器端生成的页面?

javascript - 在javascript中将日期变量转换为特定格式