反應小冊子點擊上的任意功能

反應小葉很好地提供了將內容放入標記的Popup內的能力。反應小冊子點擊上的任意功能

例如，在我的例子：

  <Marker position={[item.lat, item.lng]} key={item.machineid}> 
       <Popup maxWidth={720}> 
       <ItemGrid machineid={item.machineid} 
          username={this.props.username}/> 
       </Popup> 
      </Marker>

但是若該含量太大，它可以是笨拙，尤其是在移動。我希望在點擊標記時激活（引導）模態界面。反應傳單中有沒有辦法做到這一點？

來源

2016-12-01 notconfusing

我發現了一種黑客可以在標記上點擊時執行任意操作。（1）保持彈出窗口，但讓它的內容做你喜歡的任何事情（例如，通過默認方式打開模式）和（2）用CSS隱藏彈出窗口的容器div。

在我的情況是這樣的：地圖視圖，保持不變：

<Marker position={[item.lat, item.lng]} key={item.machineid}> 
    <Popup maxWidth={720}> 
     <ItemGrid machineid={item.machineid} 
         username={this.props.username}/> 
    </Popup> 
</Marker>

然後ItemGrid這是以前在彈出的變化，包括一個模式。（這裏我們使用reactstrap組件和模式設置爲true whnn組件坐騎。）：

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

    toggle() { 
    this.setState({ 
     modal: !this.state.modal 
    }); 
    } 

    componentDidMount() { 
    this.setState({modal:true}) 
    } 

    render() { 
    return (
     <div> 
     <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}> 
     <ModalHeader toggle={this.toggle}>Modal Header</ModalHeader> 
     <ModalBody> 
      {ContentThatWasPreviouslyInPopup} 
     </ModalBody> 
     </Modal> 
    </div>

終於在單張CSS：

.leaflet-container a.leaflet-popup-close-button { 
    position: absolute; 
    top: 0; 
    right: 0; 
    padding: 8px 8px 0 0; 
    text-align: center; 
    width: 0px; 
    height: 0px; 
    font: 0px/0px Tahoma, Verdana, sans-serif; //DANGEROUS HACK 
    color: #c3c3c3; 
    text-decoration: none; 
    font-weight: bold; 
    background: transparent; 
    } 

.leaflet-popup-content-wrapper { 
    padding: 1px; 
    text-align: left; 
    border-radius: 12px; 
    width: 0px // DANGEROUS HACK 
    }

來源

2016-12-05 18:05:16 notconfusing

反應小冊子點擊上的任意功能

回答

相關問題