将项目数据传递给react模式

Question

我有一个地图,渲染几个项目,其中一行是在下面

<a onClick={()=> this.setState({"openDeleteModal":true)}>Delete</a>

显然我想在用户点击删除时打开一个模态,但是我必须传递一些东西,比如项目的名称,项目的id来执行删除.我如何通过将名称传给模态？

我可以将obj名称绑定为a像这样删除

我是在正确的轨道上吗？

Answer 1

在处理React应用程序时,尽量不要考虑将值传递给其他组件,而是更新组件所暴露的状态.在您的示例中,假设您的模态组件是您的a标签列表所属的同一组件的子组件,您可以设置您感兴趣的值,以暴露状态上的模态,以及更新信号是否模态的属性是开放与否.例如:

class Container extends React.Component {
    constructor(props) {
       super(props)
       this.state = {
          openDeleteModal: false,
          activeItemName: '', //state property to hold item name
          activeItemId: null, //state property to hold item id
       }
    }

    openModalWithItem(item) {
       this.setState({
          openDeleteModal: true,
          activeItemName: item.name,
          activeItemId: item.id
       })
    }

    render() {

    let buttonList = this.props.item.map( item => {
      return (<button onClick={() => this.openModalWithItem(item)}>{item.name}</button>
    });

    return (
     <div>
        {/* Example Modal Component */}
        <Modal isOpen={this.state.openDeleteModal}  
               itemId={this.state.activeItemId}
               itemName={this.state.activeItemName}/>
        { buttonList }
     </div>
    )
    }
}