2016-09-16 94 views
1

我已經成功地編寫了一個reactjs應用程序。它運作良好。我一直在寫一個新的組件來從狀態中取得緯度和長度的座標,並將其傳遞給我定義的函數handleMouseOver並將其綁定到this中,在構造函數中狀態的定義方式與我在其他組件中寫的相同按預期工作。爲什麼我的反應流量函數沒有定義?

這裏是我的代碼:

'use strict'; 

import React from 'react'; 


import MapStore from '../../../stores/MapStore'; 

require('styles/Nav/Nav.scss'); 

export default class BathroomList extends React.Component { 
    constructor() { 
    super(); 
    this.handleMouseOver = this.handleMouseOver.bind(this); 
    this.state = { 
     lat: MapStore.getLat(), 
     long: MapStore.getLong() 
    } 
    } 

    handleMouseOver() { 
    console.log('Hover' + Date.now()) 
    MapActions.setBathroomListMap(this.state.lat, this.state.long) 
    } 

    render() { 
    let listSrc = MapStore.bathrooms.listSrc; 
    const bathrooms = MapStore.bathrooms.map(function(bathroom, i, mouseOver) { 
     return (
     <div key={i}> 
      <div className='bathroom-list' key={i}> 
      <button onClick={this.handleMouseOver()} ><h1> {bathroom.bathroomName}</h1></button> 
      <h2>{bathroom.description}</h2> 
      <div className='dates'> 
       <div className='date'>Found: {bathroom.date_found}</div> 
       <div className='date'>Confirmed: {bathroom.last_confirmed}</div> 
      </div> 
      </div> 
     </div> 
    ); 
    }); 

    return (
     <div> 
     {bathrooms} 

     <div className='bathroom-map'> 
      <iframe src={listSrc} className='map-frame' /> 
     </div> 
     </div> 
    ); 
    } 
} 

這是我收到錯誤。

我認爲它沒有在const bathrooms = MapStore.bathrooms.map(function(bathroom, i, mouseOver)函數的範圍內定義。

請幫忙

回答

1

你的想法是正確的。

變化MapStore.bathrooms.map(function(bathroom, i, mouseOver) {

到:MapStore.bathrooms.map((bathroom, i, mouseOver) => {

而且下面看起來像一個錯誤對我說:

<button onClick={this.handleMouseOver()}>

你想這個動作到右點擊發生的呢?不是在定義組件時。將其更改爲:

<button onClick={this.handleMouseOver}>

相關問題