onSubmit 在 react-bootstrap nav 下拉菜单中不起作用答案

【问题标题】：onSubmit not working inside react-bootstrap nav dropdownonSubmit 在 react-bootstrap nav 下拉菜单中不起作用
【发布时间】：2018-11-25 02:55:32
【问题描述】：

我一直在尝试解决此问题，但没有想法。这是我的第一个反应项目。我正在尝试在导航下拉列表中添加搜索输入。我正在使用反应引导。我知道我已经接近让它工作了，因为如果我删除表格并将其放在下拉列表之外，例如将它放在标题中它工作正常。所以它在下拉列表中的东西会导致错误。我把范围缩小到不提交。

    <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

【问题讨论】：

如果您直接向按钮添加处理程序，它会检测到点击吗？即：<input type="submit" value="Submit" onClick={onSubmitClick}/>
好点我忘了检查。是的，如果我将 onClick 添加到 onClick={() => console.log("submit")} 到按钮，则会单击控制台日志。我将尝试以这种方式运行 1 秒
WOO 谢谢你现在一切正常。所以不要在表单上使用 onSubmit 。我在表单按钮上使用了 onClick=this.buttonFormSubmitClicked。然后在 buttonFormSubmitClicked 中，我使用表单提交中的代码来更改状态和提升状态。谢谢大家谢谢你现在正在努力解决如何奖励答案=/
很高兴它有帮助！我做了一个回答，以便人们可以更轻松地看到解决您的问题的原因

标签： javascript reactjs

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

您好 Giogrio 我尝试进行更改，但仍然无法正常工作。下拉列表外的表单适用于您的代码和我的旧代码，但导航下拉列表内的表单不注册提交。我什至简化了测试。 onFormSubmit 现在有一个 console.log('clicked') 所以每次我点击提交它应该控制台日志点击导航之外的表单使控制台显示点击但下拉内的控制台什么都不做。因此，即使不改变状态，提交按钮也不会触发。