将值传递给 jsx 地图中的模式答案

【问题标题】：Pass value to a modal in jsx map将值传递给 jsx 地图中的模式
【发布时间】：2017-04-11 03:42:33
【问题描述】：

我有一张地图可以渲染几个项目。如何将项目名称、项目 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 传递它。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

一个简单的解决方案是记住您为哪个项目打开了模式。像下面的东西。打开模式时设置selected item。在删除过程中，从状态中取出并删除。

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。

【讨论】：

【解决方案2】：

一个modal可以访问react组件的状态，可以在state中存储选中链接的信息

storeInformation(item) {
     this.setState({OpenDeleteModal:true,
                            selectedId: item.id
                            selectedName: item.name

                           })
}
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>
                <div>Name is: {this.state.selecteName}</div>
            </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.storeInformation(obj)}>Delete</a>
                        </div>
                    </div>
                )}
            </div>
        </div>
    )
}

【讨论】：