Question

我正在尝试创建一个通用的Delete Component并使用reactstrap从其他组件调用。

这是我的DeleteModal

class DeleteModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <div>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Delete the item</ModalHeader>
          <ModalBody>
            Do you want to delete the item ?
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>yes</Button>
            <Button color="secondary" onClick={this.toggle}>No</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default DeleteModal;

当用户单击“是”按钮时，我需要返回该项目的ID。以便我知道已单击删除确认。

这里是我要称呼Modal的另一个组件

class Home extends Component {
handleDeleteClick(id) {
    console.log(id);
  }
}

handleDeleteClick是调用模式的方法，我还需要将ID传递给deleteModal组件，并且当用户单击YES按钮时，我需要从DeleteModal中获取ID。

我该如何实现？我试图对此进行研究，但无法确定解决方案。

Answer 1

我对您的操作方式进行了一些更改，您无需将id发送给模态，只需将deleteID保存在状态上即可。它使DeleteModal更具体，它不必知道任何ID，而只是让您知道是否必须删除，而容器组件将对此进行管理。

class DeleteModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.close = this.close.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }
  
  deleteItem(){
    this.toggle()
    this.props.clickHandler()
  }

  close(){
    this.toggle()
    this.props.onClose()
  }

  render() {
    return (
      <div>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Delete the item</ModalHeader>
          <ModalBody>
            Do you want to delete the item ?
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.deleteItem}>yes</Button>
            <Button color="secondary" onClick={this.close}>No</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default DeleteModal;



import DeleteModal from './DeleteModal'
class Home extends Component {
    constructor(props) {
    super(props);
    this.state = {
      deleteID: null
    };
    this.handleDeleteClick = this.handleDeleteClick.bind(this);
    this.onCloseModal = this.onCloseModal.bind(this);
    this.openModal = this.openModal.bind(this);
  }

  handleDeleteClick() {
   //delete object
    this.onCloseModal() 
  }
  
  onCloseModal(){
    this.setState({deleteID: null})
  }
  
  openModal(deleteID){
    this.setState({deleteID})
  }
  
  return(<div><button onClick={()=> this.openModal(id)}>Delete</button>
    {deleteID && <DeleteModal clickHandler={this.handleDeleteClick} onClose={this.onCloseModal}/>}
  </div>)
}

与Reactstrap反应的通用删除模态组件

1 个答案: