Question

这里我有这个div，它由父组件接收的数据动态生成：

            {Object.keys(this.state.cart.cart).map((key,i)=>{
                return(
                                <div className="item" key={i} identifier="mat">
                                    <div className="carti">
                                        <input type="number" value={this.state.cart.cart[key].quantity} min="1"/>
                                        <h4 className="generalDescription">{key}</h4>
                                        <h4 className="cost">₦{Math.round(this.state.cart.cart[key].totalCost*100)/100}</h4>
                                    </div>
                                    <a className="cancelBtn" key={i} onClick={this.deleteDiv} >x</a>
                                </div>)

            })}

我有这个由onClick事件处理程序调用的函数：

deleteDiv(e){
        console.log(e.target.key);
    }

现在我想在点击X按钮时获取密钥的值，但我在控制台上获得的内容是未定义的。我需要帮助！

Answer 1

正如安德鲁所说，key是一个道具，并没有转化为DOM中相应节点的属性。如果要访问它，可以将其传递给函数，例如：

deleteDiv(index){
  console.log(index);
}
...
<a className="cancelBtn" key={i} onClick={this.deleteDiv.bind(i)}>x</a>
//or
<a className="cancelBtn" key={i} onClick={() => this.deleteDiv(i)}>x</a>

甚至：

deleteDiv(e){
  console.log(e.target.dataset.key);
}
<a className="cancelBtn" key={i} data-key={i} onClick={this.deleteDiv}>x</a>

Answer 2

如果您只需要事件处理程序中的索引，只需将其作为参数传递给函数：

<a className="cancelBtn" key={i} onClick={() => this.deleteDiv(i)}>x</a>

然后

deleteDiv(index) {
    console.log(index);
}

如何通过键选择div？ reactjs

2 个答案: