React-bootstrap表单只允许我在value设置为this.state.value时输入

React-bootstrap form only lets me type if value is set to this.state.value?

本文关键字：value this state 输入 设置 允许我 React-bootstrap 表单      更新时间：2023-09-26

我是第一次使用react-bootstrap，我试图使用这里讨论的表单组件https://react-bootstrap.github.io/components.html#forms

目前在我的组件中，我的代码是这样的:

       <form>
        <FormGroup controlId="formEmail" >
          <ControlLabel>Email</ControlLabel>
          <FormControl
            type="text"
            value={this.state.loginInput.email}
            placeholder="Email"
          />
        </FormGroup>
        <FormGroup controlId="formPassword" >
          <ControlLabel>Password</ControlLabel>
          <FormControl
            type="text"
            value={this.state.loginInput.password}
            placeholder="Password"
          />
        </FormGroup>
      </form>

根据real -bootstrap页面上的说明，表单完全按照预期正确地呈现，但是当我尝试键入输入时，什么也没有发生。如果我将以下行从value={this.state.loginInput.password}更改为value={this.state.value}，我只能在输入中输入

如果我试图使this.state.value变成value以外的任何东西，它将不起作用。我的构造函数看起来像这样:

  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      loginInput: {
        email: '',
        password: '',
      },
    };

有一个原因反应引导不让我使用我自己的值吗?

解决方案似乎是FormControl要求我有一个OnChange函数，否则输入字段是只读的?这似乎是奇怪的行为，但仅仅改变我的表单有一个onChange事件定义允许表单工作如预期。

        <FormGroup controlId="formPassword" >
          <ControlLabel>Password</ControlLabel>
          <FormControl
            type="text"
            value={this.state.loginInput.password}
            placeholder="Password"
            onChange={this.handleChange}
          />
        </FormGroup>
相关文章：