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之外的任何其他内容中，那么它将无法正常工作。我的构造函数看起来像这个btw：

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

有没有理由反应引导并不让我在那里使用自己的价值？

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>

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

1 个答案: