onSubmit在react引导程序导航下拉列表中不起作用

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();
};

有什么想法请帮忙。编辑：控制台中没有出现错误。

链接到图片截图

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引用可能存在，也可能不存在。