（React ES6）动态添加模态触发器到地图标记

所以我试图从ES6中使用react-bootstrap中的React中的相同数据动态创建模态和标记，并且使标记成为模态的触发器。现在，我一直在呼唤页的相同模式（React ES6）动态添加模态触发器到地图标记

代码生成标记/情态动词：

class SimpleMapPage extends React.Component { 
    //shouldComponentUpdate = shouldPureComponentUpdate; 
    constructor(props) { 
     super(props); 
     this.state = { 
      userPosition: {lat: 40.7128, lng: -74.0059}, 
      defaultCenter: { 
       lat: 40.7128, 
       lng: -74.0059 
      }, 
      zoom: 12, 
      showModal: false 
     } 
     this.close = this.close.bind(this); 
     this.open = this.open.bind(this); 
     this._onChildClick = this._onChildClick.bind(this); 

    } 

    close() { 
     this.setState({ showModal: false }); 
     } 

    open() { 
     this.setState({ showModal: true }); 
     } 


    _onChildClick(key, childProps){ 
     console.log('ow'); 
     this.setState({ showModal: true}); 
     const markerId = childProps.marker.get("id"); 
     const index = this.props.markers.findIndex(m => m.get('id') === marker.name); 
     if (this.props.onChildClick) { 
     this.props.onChildClick(index); 
     } 
    } 



    componentDidMount() { 
     this.getCurrentPosition(); 
    } 

    markers(){ 
     return Markers.find().fetch(); 
    } 
    render() { 
     console.log(this.state.userPosition) 



     return (
      <div style={divStyle}> 
       <GoogleMap bootstrapURLKeys={{ 
        key: 'AIzaSyDAQIZigb4sd4EIMVeDZ1jxdx8tH9QRyEM', 
        language: 'us' 
       }} 
        center={this.state.userPosition} 
        zoom={this.state.zoom} 
        defaultCenter={this.state.defaultCenter} 
        defaultZoom={this.state.zoom} 
        hoverKey= "lol" 
        hoverDistance={40/2} 
        visibleRowFirst= "-1" 
        visibleRowLast= "-1" 
        hoveredRowIndex= "-1" 
        onChildClick={this._onChildClick} 

        > 

         {this.markers().map((marker) => { 
         return <MyGreatPlace key={marker.name} lat={marker.lat} lng={marker.lng} hover="lol" /> 
         })} 

         {this.markers().map((marker) => { 
         return <Modal show={this.state.showModal} onHide={this.close} id={marker.name}> 
         <Modal.Header closeButton> 
          <Modal.Title>{marker.name}</Modal.Title> 
         </Modal.Header> 
         <Modal.Body> 
          <h4>{marker.description}</h4> 
          <a href={"https://www.google.com/maps/dir/Current+Location/"+marker.lat+'+'+marker.lng} target="_blank">Click Here for Directions</a> 
         </Modal.Body> 
         </Modal> 
         })} 

         <MyGreatPlace lat={this.state.userPosition.lat} lng={this.state.userPosition.lng} text="You" /> 
       </GoogleMap> 
      </div> 
     ); 
    } 
} 

SimpleMapPage.propTypes = { 
    center: PropTypes.array, // @controllable 
    zoom: PropTypes.number, // @controllable 
    hoverKey: PropTypes.string, // @controllable 
    clickKey: PropTypes.string, // @controllable 
    onCenterChange: PropTypes.func, // @controllable generated fn 
    onZoomChange: PropTypes.func, // @controllable generated fn 
    onHoverKeyChange: PropTypes.func, // @controllable generated fn 

    greatPlaces: PropTypes.array 
};

这里是为孩子创造的地图标记传递的MyGreatPlaces组件：

export default class MyGreatPlace extends Component { 
     constructor(props) { 
    super(props); 

     this.state= { 
      hover: PropTypes.bool, 
      text: PropTypes.string 
    } 
    } 

    render() { 
    const style = this.props.hover ? greatPlaceStyleHover : greatPlaceStyle; 

    return (
     <div className="hint" style={style}> 
      <div>{this.props.text}</div> 
      <div style={{width: 80}} className="hint__content"> 
      </div> 
     </div> 
    ); 
    } 
}

来源

2016-10-19 Nick West

好的，所以我必须通过GoogleMap子组件Marker运行_onclick方法，以设置数据目标：动态添加到每个标记子（并引用其自己的方法）

来源

2016-10-21 16:36:15

（React ES6）动态添加模态触发器到地图标记

回答

相关问题