Question

我有一个简单的列表显示在fetch调用的返回值上。我有一些功能在选择项目时触发，但对于我的生活，我无法触发onClick事件。我有一些绑定在地图之外的事件可以正常工作（onKeyUp和down），但是在地图内部的onClick不起作用。不知道从哪里去。

handleClick() {
// won't fire
        console.log('test')
    }

render() { 
        return (
            <div className="autocomplete">
                <input type="text" placeholder={this.props.fieldName} onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} onClick={this.handleClick} />
                <div className="autocomplete__list" onClick={this.handleClick}>
                    <ul>
                        {this.state.list.map((item, index) => <li key={index} className={this.checkActive(index)} onClick={this.handleClick}>{item.firstName}</li>)}
                    </ul>
                </div>
            </div>
        )
    }

没有抛出任何错误，单击这些字段时该方法不执行任何操作。如果它重要，那么＆＃34;列表＆＃34;绝对定位。这是构造函数

constructor(props) {
        super(props)
        this.state = {
            name: '',
            list: [],
            cursor: 0
        }
        this.handleKeyDown = this.handleKeyDown.bind(this)
        this.handleKeyUp = this.handleKeyUp.bind(this)
        this.checkActive = this.checkActive.bind(this)
        this.handleClick = this.handleClick.bind(this)
    }

Answer 1

问题似乎是：

您在包含所有li的父元素上拥有相同的处理程序。通常，点击事件会从孩子向上冒泡到父母，所以这不太可能。
您的li是比父元素更低的z-index。这意味着li元素位于元素下。所以点击事件只发生在顶部的元素上。

尝试将此添加到您的css

.autocomplete__list li {
    z-index: 100;
}

React onClick不在地图生成列表中触发

1 个答案: