Как вызвать модал, передавая реквизит

Question

Я хочу показать модальное ПОСЛЕ того, как я нажму на маркер. Но это показывает слишком рано, с первым рендером. Как я могу вызвать модальное ПОСЛЕ нажатия на карту? Как я могу изменить состояние в ModalComponent с false на true от моего родительского компонента? ПОМОГИТЕ!

Мой главный компонент

class Main extends Component {
  constructor() {
    super();
    this.state = {
       markers: [],
       readyToAddMarker: true
};
 this.handleMarker = this.handleMarker.bind(this);
}

 componentDidMount() {
   this.loadData();
 }

loadData() {
   fetch("/api/markers")
     .then(response => {
       if (response.ok) {
        response.json().then(data => {
        this.setState({ markers: data.records });
      });
     } else {
      response.json().then(error => {
        alert("Failed to fetch issues:" + error.message);
      });
    }
  })
  .catch(err => {
    alert("Error in fetching data from server:", err);
  });
}

handleMarker(e) {
 if (this.state.readyToAddMarker) {
  const lat = e.latlng.lat;
  const lng = e.latlng.lng;
  const coord = { location: [lat, lng] };
  const newState = this.state.markers.concat(coord);
  this.setState({
    location: [lat, lng],
    markers: newState,
    readyToAddMarker: false
  });
 }
}
render() {
 return (
  <div>
    <Map
      center={{ lat: 51.509, lng: -0.09 }}
      onClick={e => this.handleMarker(e)}
      zoom={13}>
      <TileLayer
        attribution='&copy; <a 
  href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
      />
      {this.state.markers.map(marker => (
        <Marker key={marker._id} position={marker.location}>
          <Popup>
            <span>
              {" "}
              <br /> {marker.content}
            </span>
          </Popup>
        </Marker>
      ))}
     </Map>
    <ModalExample modal={this.state.modal} />
   </div>
   );
  }
 }

Мой компонент ModalExample

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}>Modal title</ModalHeader>
      <ModalBody>
        Lorem ipsum
      </ModalBody>
        <ModalFooter>
           <Button color="primary" onClick={this.toggle}>Do 
          Something</Button>
          <Button color="secondary" onClick={this.toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
     </div>
   );
 }

Как я могу влиять на состояние одного компонента (ModalExample) из другого компонента (Основной)? Я хочу нажать на карту и получить координаты. Это действие (клик) должно открыть модал.

Answer 1

В функции вызова компонента Marker onClick like -

handleClick = () => {
   this.setState({openModal: true})
}

<Marker key={marker._id} position={marker.location} onClick={this.handleClick}>

<ModalExample modal={this.state.modal} openModal={this.state.openModal}/>

и затем в модальном примере -

<Modal isOpen={this.props.openModal}

Answer 2

В этом случае нужно перейти к lift your state up, видимость вашего модала контролируется через состояние modal в компоненте ModalExample, вместо этого поднимите это состояние в компоненте main и пропустите его через подпорки, затем вы можете изменить его, используя onClick вашего Map компонента.