javascript - 将值传递给 jsx map 中的模态

Question

我有一张可以渲染一些项目的 map 。如何将项目名称、项目 ID 等参数传递给模态组件？

render(){
    return(
        <div>

            <Modal 
                isOpen={this.state.OpenDeleteModal}
                confirmationTitle={`Delete item`}
                confirmationCancel={'No'}
                confirmationSuccess={'Yes'}
                closeModal={this.closeModal}
                successModal={this.successModal}
            >
                <p className="center">Are you sure you want to delete this item?</p>
            </Modal>

            <div className="wrapper">
                {map(items, obj =>
                    <div key={obj._id} className="panel-body">
                        <div className="row">
                            <h2 className="title">{obj.name}</h2>
                            <a onClick={()=> this.setState({OpenDeleteModal:true})}>Delete</a>
                        </div>
                    </div>
                )}
            </div>
        </div>
    )
}

我只能想到将 obj._id 作为自定义属性放入标签中，当用户单击删除时，它会更改 selectedItem 的状态，并通过 props 传递它。

Answer 1

一个简单的解决方案是记住您打开模式的项目。像下面这样的东西。打开模式时设置所选项目。在删除期间，从状态中获取它并删除它。

render(){
  return(
    <div>

        <Modal 
            isOpen={this.state.OpenDeleteModal}
            confirmationTitle={`Delete item`}
            confirmationCancel={'No'}
            confirmationSuccess={'Yes'}
            closeModal={this.closeModal}
            successModal={this.successModal}
        >
            <p className="center">Are you sure you want to delete this item?</p>
        </Modal>

        <div className="wrapper">
            {map(items, obj =>
                <div key={obj._id} className="panel-body">
                    <div className="row">
                        <h2 className="title">{obj.name}</h2>
                        <a onClick={()=> this.setState({OpenDeleteModal:true, selectedItem: obj._id})}>Delete</a>
                    </div>
                </div>
            )}
        </div>
    </div>
 )
}

更新:请确保在关闭模式后清除selectedItem。