reactjs - 如何在反应函数中关闭引导模式

Question

在我更新组件中调用 handleClose 函数的日期并且模式关闭后，我在我的反应组件中打开了 2 个模式。现在的问题是只有组件的主体正在消失，模态标题仍然显示。当我点击模态关闭按钮时，它消失了。我的问题是如何从反应函数中关闭引导模式？

export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      services: [],
      showHideNew: false,
      showHideEdit: false,
      editId: null,
      loaded: false
    };  
    this.hideComponent = this.hideComponent.bind(this);
    this.fetchService = this.fetchService.bind(this);
    this.handelClose = this.handelClose.bind(this)
  
   }

   
  componentDidMount() {
      this.fetchService()   
    }
    
  hideComponent(name) {
      switch (name) {
        case "showHideNew":
          this.setState({ showHideNew: true });
          this.setState({ showHideEdit: false });
          break;
        case "showHideEdit":
           this.setState({ showHideEdit: true });
           this.setState({ showHideNew: false });
            break;
      }
    }
  updateService(id) {
    this.setState({editId: id})
    this.hideComponent("showHideEdit")
  }
 
  fetchService = async () => {
      const response = await fetch(`/api/services`)
      const initialService = await response.json()
      const services = initialService
      this.setState({ services })
  }
  handelClose = () => {
    console.log("close here")
    this.setState({showHideEdit: false})
    this.setState({showHideNew: false})
   
  }


  
  render() {
    const { showHideNew, showHideEdit} = this.state;
    return (
      <> 
      <div>
      <div class="col-md-12 align-self-center text-right">
        
    <button onClick={() => this.hideComponent("showHideNew")} type="button" class="btn btn-grad" data-toggle="modal" data-target="#exampleModal5">
    New Service
    </button>
    <small class="d-block mt-2"></small>

  
  </div>
      <div class="col-sm-12 mb-5">
                    <h5 class="text-center mb-4">Services</h5>
          
                    <div class="table-responsive-sm">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Title</th>
                  <th scope="col">Tag</th>
                  <th scope="col">Edit</th>
                  <th scope="col">Delete</th>
                                </tr>
                            </thead>
                            <tbody>
              {this.state.services.map(service => 
                    <tr>
                    <th scope="row">{service.id}</th>
                    <td>{service.title}</td>
                    <td>{service.tag}</td>
                    <td><button data-toggle="modal" data-target="#exampleModal6" onClick={() => this.updateService(service.id)}>
                    <i class="ti-pencil"></i>
                    </button></td>
                    <td><button onClick={() => this.deleteService(service.id)}>
                    <i class="ti-trash"></i>
                    </button></td>
                  
                  </tr>
              )}
                            </tbody>
                        </table>
                    </div>
             </div>

       <div class="modal fade text-left" id="exampleModal5" tabindex="-1" role="dialog" aria-labelledby="exampleModal5" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">New Service</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          {showHideNew && <ServiceNew  closeModal = {this.handelClose.bind(this)} getService ={this.fetchService.bind(this)}  />}
          </div>
        
        </div>
      </div>
    </div>

    <div class="modal fade text-left" id="exampleModal6" tabindex="-1" role="dialog" aria-labelledby="exampleModal6" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Edit User</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          {showHideEdit && <Edit  getService ={this.fetchService.bind(this)}  services = {this.state.services} editId = {this.state.editId} closeModal = {this.handelClose.bind(this)}/>}
          </div>
        
        </div>
      </div>
    </div>

    
      </div>
      </>
     
    
      );
    
    }
  }

标签： reactjsreact-bootstrap