Question

我正在导航栏中搜索字段，我需要将结果显示为下拉菜单，以允许用户选择其中一个结果。问题是Dropmenu阻止了空格键事件，因此我的输入不允许空格。如果我写“ Hello World”，输入将改为显示“ HelloWorld”。

我正在使用react-bootstrap 0.32.4

这是我所在领域的简化版本：

class SearchField extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "" };
  }
  handleChange = e => {
    this.setState({ text: e.target.value });
    /*
    Here is where I need to implement the handling
    of the user input while he writes
    */
  };
  render() {
    const form = (
      <Form>
        <FormGroup>
          <FormControl
            type="text"
            value={this.state.text}
            onChange={this.handleChange}
          />
        </FormGroup>
      </Form>
    );
    return form;
  }
}

这里是如何将其嵌入到下拉菜单标题中的，除了空格以外，它都可以正常工作...

class Navigation extends React.Component {
  render() {
    return (
      <Navbar fixedTop fluid>
        <Navbar.Header>
          <Navbar.Brand>TEST</Navbar.Brand>
        </Navbar.Header>
        <Nav>
          <NavDropdown id="m1" title="menu 1">
            <MenuItem>item 1</MenuItem>
            <MenuItem>item 2</MenuItem>
          </NavDropdown>
          <NavDropdown id="m2" title="menu 2">
            <MenuItem>item 3</MenuItem>
            <MenuItem>item 4</MenuItem>
          </NavDropdown>
          <NavDropdown title={<SearchField />}>
            <MenuItem>item 5</MenuItem>
            <MenuItem>Item 6</MenuItem>
          </NavDropdown>
        </Nav>
      </Navbar>
    );
  }
}

在这里您可以尝试以下代码： https://codesandbox.io/s/ryy3vkmrzo

Answer 1

该怎么办？对我来说很好。

<FormControl type="text" onKeyDown={e => e.stopPropagation()}/>

使用react-bootstrap

1 个答案: