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）与另一个组件（Main）的状态？我想单击地图并获取坐标。此操作（单击）必须打开模式。

Answer 1

在这种情况下，方法是转到lift your state up，模态的可见性是通过modal组件中的ModalExample状态控制的，而不是通过{{1} }组件并通过props传递，然后您可以使用main组件的onClick进行更改。

Answer 2

在Marker组件调用函数onClick中-

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}

如何通过传递道具来调用模态

2 个答案: