React onClick在地图生成列表里没有射击

我有一个简单的列表显示在获取调用的返回值上。我有一些选择项目的功能，但对于我的生活，我无法解雇onClick事件。我在地图之外绑定的事件工作得很好（onKeyUp和down），但地图内的onClick不起作用。不知道该从哪里出发。React 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> 
     ) 
    }

没有错误抛出，单击这些字段时，该方法什么也不做。如果它很重要，那么“名单”是绝对定位的。这里是

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) 
    }

来源

2017-05-28 Organiccat

请与**运行的更新您的问题** [MCVE]使用堆栈片段（在'[<>]'工具栏按钮）。 Stack Snippets支持React，包括JSX; [这是如何做一个]（http://meta.stackoverflow.com/questions/338537/）。 –

你尝试过'onClick = {this.handleClick.bind（this）}'吗？ – wostex

是的，这也没有什么火 – Organiccat

这个问题似乎是构造函数之一：

你有一个父元素相同的处理程序，它包装所有li“的秒。通常情况下，点击事件从孩子到父母向上冒泡，所以这是不太可能的。
您的li的Z值低于父元素。这意味着li元素在一个元素下。所以点击事件只发生在顶部的元素上。

尝试添加该到你的CSS

.autocomplete__list li { 
    z-index: 100; 
}

来源

2017-05-28 21:00:41

谢谢，点击处理程序已连接到父级（和其他）元素，以查看是否可以触发它。问题是z-index本身，它不会引发错误（因为事件根本没有被触发），因为元素被其他元素覆盖。 – Organiccat

React onClick在地图生成列表里没有射击

回答

相关问题