Question

我一直在尝试解决此问题，但没有任何想法。这是我的第一个反应项目。我正在尝试在导航下拉列表中添加搜索输入。我正在使用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提升为父组件之前，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>

Answer 2

您需要先将e.target.value分配给变量，然后再将其传递给setState()。

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

发生这种情况是因为setState()是异步的，因此在执行之时，您的e.target.value引用可能存在也可能不存在。

onSubmit无法在react-bootstrap导航下拉菜单中工作

2 个答案: