Question

我从firebase获取了数据，通过它循环并在前端显示它。现在，当我点击它时，我正在尝试获取已显示值的refs值。例如，当我点击Dino时，我应该能够看到“Dino＆＃39;在Chrome浏览器的控制台选项卡上。

Here is a link to the picture of the array list displayed on react frontend

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

Answer 1

假设那些＆＃34; dino，magic＆amp; MUU＆＃34;是this.props.group中需要向onClick添加div处理程序的键，所以：

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

Answer 2

您需要将点击事件绑定到div中的每个li。我会像这样重写它：

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

如何在React中从动态生成的数组中获取refs值

2 个答案: