Question

你好我在bootstrap上实现我自己的InputDropdown组件 - react来给用户能力输入项或从过滤列表中选择它。它工作得很好，但是为了隐藏单击元素的下拉列表，我在FormControl上添加了onBlur事件，该事件与Dropdown中的onSelect事件冲突。下拉关闭更快然后onSelect发生。所以，我在onBlur处理程序中添加了setTimeout，现在它在尝试关闭Dropdown.Menu之前等待了100ms。我可以这样做，是不是有解决方案？ 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功能。

在react-bootstrap中单击out of element时切换下拉列表

1 个答案: