javascript - 如果值设置为 this.state.value，React-bootstrap 表单只允许我输入？

Question

我是第一次使用 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>

根据 reat-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: '',
      },
    };

react-bootstrap 不允许我在那里使用我自己的值有什么原因吗？

Answer 1

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

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