我有一个包含两个组件的 React 应用程序,Counters 和 Counter,其中 Counters 组件的状态对象包含一个对象数组,每个对象代表一个 Counter。
在计数器组件的实际 jsx 代码中,计数器数组中的项目正在呈现,每个项目都包含一个删除按钮,可以删除每个单独的计数器。现在,我有一个箭头函数来处理删除,它是设置为正在呈现的计数器标记中的属性。在 Counter 组件中,删除按钮中有一个 onCLick 事件,该事件将被单击的 Counter 的 id 作为参数。
由于某种原因,删除不起作用,当我控制台记录已单击的计数器的 ID 时,会打印未定义。 是什么导致无法从 Counter 组件读取 id 属性?
相关代码如下:
计数器组件:
class Counter extends Component {
state = {
value: this.props.value
};
render() {
console.log(this.props);
return (
<div>
{this.props.children}
<span className={this.getBadgeClasses()}>{this.formatCount()}</span>
<button
onClick={() => this.handleIncrement({ id: 1 })}
className="btn btn-sercondary btn-sm"
>
Increment
</button>
<button
onClick={() => this.props.onDelete(this.props.id)}
className="btn btn-danger btn-sm m-2"
>
Delete
</button>
</div>
);
}
计数器组件:
import Counter from "./counter";
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
]
};
handleDelete = counterId => {
console.log("Event Handler Called", counterId);
const counters = this.state.counters.filter(c => c.id !== counterId);
this.setState({ counters });
};
render() {
return (
<div>
{this.state.counters.map(counter => (
<Counter
key={counter.id}
onDelete={this.handleDelete}
value={counter.value}
/>
))}
</div>
);
}
}
最佳答案
你需要通过 prop id
至 Couter
在组件的渲染函数中 Couters
因为按钮需要它 <button onClick={() => this.props.onDelete(this.props.id)}
;
看这里
<Counter
id={counter.id}
key={counter.id}
onDelete={this.handleDelete}
value={counter.value}
/>
或者,你可以这样做
<Counter
key={counter.id}
onDelete={() => this.handleDelete(counter.id)}
value={counter.value}
/>
关于Javascript 对象 ID 字段未传递给事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55155006/