在 react-bootstrap 中单击元素时切换下拉菜单

Question

您好，我正在 bootstrap-react 上实现我自己的 InputDropdown 组件，以提供用户能力输入项或从过滤列表中选择它。 它工作得很好，但是为了在点击元素时隐藏下拉菜单，我在 FormControl 上添加了 onBlur 事件，该事件与 Dropdown 中的 onSelect 事件冲突。下拉菜单关闭得更快，然后 onSelect 发生。 因此，我在 onBlur 处理程序中添加了 setTimeout，现在它在尝试关闭 Dropdown.Menu 之前等待 100 毫秒。 我可以这样做吗？没有更好的解决方案吗？ Full code on CodePen

class InputDrop extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text: props.item?props.item.name: '',
      open: false,
      show: !!props.item
    }
    const methods = ['toggleDropdown', 'textChange', 'onSelect', 'onKeyUp', 'stopShow', 'onBlur']
    methods.forEach(methodName => this[methodName] = this[methodName].bind(this))
  }
  toggleDropdown() {
    if(this.state.text && this.state.open) return
    if (!this.state.open) this.inputItem.focus()
    this.setState({open: !this.state.open})
  }
  onBlur() {
    setTimeout(() => (this.state.open && 
                      this.setState({open: false, text: ''})), 100)
  }
  onSelect(eventKey) {
    const index = this.props.items.findIndex(item => item.id == eventKey)
    const item = this.props.items[index]
    this.setState({
      open: false,
      text: item.name,
      show: true,
    })
    this.props.onResult(item)
  }


  render() {
    if (this.state.show) return <Button onClick={this.stopShow}>{this.state.text}</Button>
    const items = this.state.open ? this.filteredItems() : null
    return (
      <Dropdown
        onSelect={this.onSelect}
        open = {this.state.open && items.length}>
        <InputGroup>
          <FormControl 
            type='text'
            value={this.state.text}
            onClick={this.toggleDropdown}
            onKeyUp={this.onKeyUp}
            onBlur={this.onBlur}
            inputRef={ref => this.inputItem = ref}
            onChange = {this.textChange}/>
          <InputGroup.Addon onClick={this.toggleDropdown}>
              <Glyphicon glyph="triangle-bottom" />
          </InputGroup.Addon>
        </InputGroup>
        <Dropdown.Menu>
          {items && items.map((item, index) => (
            <MenuItem key={item.id} eventKey={item.id}>
              {item.name}
            </MenuItem>
          ))}
        </Dropdown.Menu>
      </Dropdown>
    )
  }
}

Answer 1

尝试更改 onSelect 函数中的代码：

this.setState({
  open: false,
  text: item.name,
  show: true,
})

到：

this.setState({
      // open: false,
      text: item.name,
      show: true,
    }, this.state.open && this.setState({open: false, text: ''}))

并删除您的 onBlur 功能。