我正在做一个待办事项应用程序来练习 React。我遇到了阻碍,现在我正在尝试找出如何独特地编辑一张卡片。
目前,当我点击编辑时,我的所有卡片都设置为 isEditing == true
。我尝试添加 key 和索引,但似乎无法唯一标识所选卡。
如我的 gif 所示:
显然,预期的结果是它应该只将 isEditing == true
设置为所选卡片。
请参阅下面的代码。
更多上下文: 有状态组件将 Prop 传递给该组件,我正在使用 react-bootstrap
(因此 Panel
、Button
),为了简洁起见,我删除了一些代码(construct
之类的)。
edit() {
this.setState({
isEditing: true
})
}
renderEditDoneButtons() {
return (
<div>
<Button onClick={this.edit}>edit</Button>
</div>
)
}
renderNote(note) {
return (
<p> {note} </p>
)
}
renderCard(note, i) {
return (
<Panel key={i}
index={i}>
{
this.state.isEditing ?
this.renderForm() :
this.renderNote(note.note)
}
</Panel>
)
}
render() {
return (
<div>
{this.props.notes.map(this.renderCard)}
</div>
)
}
最佳答案
这三个选项都根据您的单个 isEditing
状态而变化,这就是为什么当您单击任何“编辑”按钮时,您会看到所有三个选项都显示出来。使用数组来维护所有三个状态,而不是状态中的单个 isEditing
键:
constructor(props) {
super(props);
// Sets a true/false editing state for all three panels
this.state = {
editingPanels: Array(3).fill(false)
}
}
edit(i) {
// Switches editing state to false/true for given i
const editingPanels = this.state.editingPanels.slice();
editingPanels[i] = !editingPanels[i];
this.setState({
editingPanels: editingPanels
})
}
renderEditDoneButtons(i) {
return (
<div>
<Button onClick={()=>this.state.edit(i)}>edit</Button>
</div>
)
}
renderNote(note) {
return (
<p> {note} </p>
)
}
renderCard(note, i) {
return (
<Panel key={i}
index={i}>
{
this.state.editingPanels[i] ?
this.renderForm() :
this.renderNote(note.note)
}
</Panel>
)
}
render() {
return (
<div>
{this.props.notes.map(this.renderCard)}
</div>
)
}
关于javascript - ReactJS 从 map 中唯一选择一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54053508/