Question

我的代码中有什么错误？我的onFocus事件不适用于div

class Hello extends React.Component {
  state = {
    openDropdown: false
  }
  toggleDropdown = () => {
  alert('x')
    this.setState({
        openDropdown: !this.state.openDropdown
    })
  }
  render() {
    return (
      <div>
        <div onFocus={this.toggleDropdown} onBlur={this.toggleDropdown}>
          MyList
        </div>
        <ul className={this.state.openDropdown ? 'show' : 'hide'}>
          <li>abc</li>
          <li>123</li>
          <li>xyz</li>
        </ul>
      </div>
    );
  }
}

http://jsfiddle.net/sua5j29b/

这种方法存在另一个问题，当我点击其中一个列表时，如何关闭下拉列表？如果我改变openDropdown的状态，行为可能会被破坏。

Answer 1

要在div上应用onFocus或onBlur，我必须使用

tabIndex='0'

上的

div

onFocus不会触发显示和隐藏列表项

1 个答案: