我如何从React中动态生成的数组中获取引用值

Question

我从firebase中获取了数据，循环浏览并显示在前端。 现在，当我单击它时，我试图获取已显示值的refs值。 例如，当我单击Dino时，我应该能够在Chrome浏览器的控制台标签上看到值“ Dino”。

这是反应前端上显示的阵列列表图片的链接

<ul>
    <li onClick={this.handleSubmit}>        
        {               
            Object.keys(this.props.group).map(function(keyName, keyIndex) {
                return(
                    <div key={keyIndex}>{keyName}</div>
                )
            })
        }
    </li>
</ul>

Answer 1

假设这些“恐龙，魔法和muu”是this.props.group中的键， this.props.group需要向该div添加一个onClick处理程序，因此：

<div key={keyIndex} onClick={() => console.log(keyName)}>{keyName}</div>

Answer 2

您需要将一次click事件绑定到li内的每个div 。 我实际上会这样重写它：

 <ul>    
    {               
        Object.keys(this.props.group).map( (keyName, keyIndex) => {
            return(
                <li key={keyIndex} onClick={this.handleSubmit.bind(this, keyName}>  
                    {keyName}
                </li>
            )
        })
    }
</ul>

然后，您的handleSubmit函数将把keyName作为参数：

handleSubmit(keyName){
    // Do something...
}