javascript - 将项目数据传递给 react 模态

Question

我有一张 map ，只渲染了几个项目，其中一条线在下面

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

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

我可以像这样将 obj 名称绑定(bind)到 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>
    )
    }
}