javascript - onSubmit 在 react-bootstrap 导航下拉菜单中不起作用

Question

我一直在尝试解决这个问题，但没有办法。这是我的第一个 react 项目。 我正在尝试在导航下拉列表中添加搜索输入。我正在使用 react Bootstrap 。 我知道我快要让它工作了，因为如果我删除表单并将其放在下拉列表之外，例如将它放在标题中，它就可以正常工作。所以它在下拉列表中的东西导致了错误。我将范围缩小到不提交。

    <Navbar inverse collapseOnSelect>
    <Navbar.Header> ...

    </Navbar.Header>

    <Navbar.Collapse>

      <Nav pullRight>
        <NavItem eventKey={1} href="#" className="nav-item">
          Home
        </NavItem>
        <NavDropdown eventKey={3} title="Watches" id="basic-nav-dropdown">
          <MenuItem eventKey={3.3} className="nav-item">
            <form onSubmit={this.onFormSubmit}>
              <input
                type="text"
                value={this.state.term}
                onChange={this.onInputChange}
                onClick={this.onClickStopDismiss}
              />
              <input type="submit" value="Submit" />
            </form>
          </MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

写在同一个雅致组件中的处理程序如下。将 onClickStopDismiss 添加到输入的原因是因为当我在下拉列表中选择搜索栏时，它在我可以输入之前将其关闭。通过将此 onClick 添加到搜索输入，它阻止了下拉菜单的关闭。

状态被传递到父组件，但它在这里不相关，因为在它被提升到父组件之前，console.log 中没有出现任何内容。所以有一些东西阻止了提交按钮。

class NavMain extends Component {
  state = {
    term: ""
  };

  onInputChange = e => {
    this.setState({ term: e.target.value });
  };

  onFormSubmit = e => {
    console.log(this.state.term);
    e.preventDefault();

    // call back function that will run when called from parent component
    this.props.onTermSubmit(this.state.term);
    this.setState({ term: "" });
  };

  onClickStopDismiss = e => {
    // e.preventDefault();
    e.stopPropagation();
  };

请提出任何想法。编辑:控制台中没有出现错误。

link here to image screenshot

Answer 1

作为变通方法，您可以通过将点击处理程序直接添加到 input 元素来检测提交事件，并在此特定情况下跳过使用表单。

<Navbar inverse collapseOnSelect>
<Navbar.Header> ...

</Navbar.Header>

<Navbar.Collapse>

  <Nav pullRight>
    <NavItem eventKey={1} href="#" className="nav-item">
      Home
    </NavItem>
    <NavDropdown eventKey={3} title="Watches" id="basic-nav-dropdown">
      <MenuItem eventKey={3.3} className="nav-item">
        <input
          type="text"
          value={this.state.term}
          onChange={this.onInputChange}
          onClick={this.onClickStopDismiss}
        />
        <input type="submit" value="Submit" onClick={onSubmit} />
      </MenuItem>
    </NavDropdown>
  </Nav>
</Navbar.Collapse>