javascript - ReactJS 从 map 中唯一选择一个元素

Question

我正在做一个待办事项应用程序来练习 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>
        )
    }  

Answer 1

这三个选项都根据您的单个 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>
    )
}