reactjs - 每当我将 id 从孩子发送给父母时,我都会变得不确定,我可以知道我错过了什么吗?
问题描述
试图将 id 属性从计数器发送到计数器,以便我可以删除相应的 React 元素。 *在counters组件的handleDelete中试图查看counterid,但得到一个未定义的响应,我能得到一些帮助来了解它为什么是未定义的,我相信会得到1、2、3、4、5。
计数器.jsx
import React, { Component } from "react";
class Counter extends Component {
state = {
value: this.props.value,
};
handleIncrement = () => {
this.setState({ value: this.state.value + 1 });
};
render() {
return (
<div>
<span className={this.getBadgeClasses()}>{this.formatCount()}</span>
<button
onClick={this.handleIncrement}
className="btn btn-secondary btn-sm"
>
Increment
</button>
<button
onClick={() => this.props.onDelete(this.props.id)}
className="btn btn-danger btn-sm m-2"
>
Delete
</button>
</div>
);
}
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.state.value === 0 ? "warning" : "primary";
return classes;
}
formatCount() {
const { value: count } = this.state;
return count === 0 ? "Zero" : count;
}
}
export default Counter;
计数器.jsx
import React, { Component } from "react";
import Counter from "./counter";
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 0 },
{ id: 2, value: 4 },
{ id: 3, value: 3 },
{ id: 4, value: 2 },
{ id: 5, value: 15 },
],
};
handleDelete = (counterId) => {
console.log("Event Handler Called", counterId);
};
render() {
return (
<div>
{this.state.counters.map((counter) => (
<Counter
key={counter.id}
onDelete={this.handleDelete}
value={counter.value}
></Counter>
))}
</div>
);
}
}
export default Counters;
解决方案
您没有将任何内容传递id
给Counter
组件。该key
属性仅用于通过应用程序识别组件,避免多次调用同一个组件时发生冲突。
您需要做的是向您的组件发送一个id
道具:Counter
Counters.jsx
this.state.counters.map((counter) => (
<Counter
key={counter.id}
onDelete={this.handleDelete}
value={counter.value}
id={counter.id} // HERE: send an id prop to your component
></Counter>
))
这样你的组件Counter
就可以调用this.props.id
.
推荐阅读
- curl - solr:curl delete 命令静默失败
- delphi - 如何在 Delphi 中定义字符串集
- python-3.x - 如何使用预定义的密钥和 IV 在 python3 中进行 TripleDES 加密?
- javascript - 每 3 秒将 console.log 结果存储到数组中
- .net - 如何在不同步的情况下访问 .NET 中的 Realm 数据
- selenium - Safari Selenium - Actions 类和 JavaScriptExecutor 不工作
- amazon-web-services - 具有网络负载均衡器的 Elastic Beanstalk 中的非 TCP 侦听器
- python - 对熊猫数据框使用 to_excel(...) 函数时,如何在空字符串、np.nan 和 None 之间进行分隔?
- sql - 计算百分比
- react-native - 带有 react-native-chart-kit 的条形图中的实心条