React組件沒有觸發onClick事件

Question

我正在通過Tyler Mcginnis的React天氣應用教程進行工作，並且我被困在第9步。我已經設置了一個onClick事件，它應該推送路徑上的狀態和路徑名並重定向到路由。

當我點擊元素時，沒有任何反應。我嘗試控制檯登錄事件，但它甚至沒有開火。

我建立了我的ForecastContainer這樣的：

var React = require('react'); 
var Forecast = require('../components/Forecast'); 
var weatherHelpers = require('../utils/weather'); 

var ForecastContainer = React.createClass({ 
    contextTypes: { 
     router: React.PropTypes.object.isRequired 
    }, 

    getInitialState: function(){ 
    return { 
     isLoading: true, 
     forecastData: {} 
    } 
    }, 

... 

    handleClick: function(weather){ 
    this.context.router.push({ 
     pathname: '/detail/' + this.props.routeParams.city, 
     state: { 
     weather: weather 
     } 
    }) 
    console.log(weather) 
    }, 

    componentWillUnmount: function() { 
    window.clearInterval(this.interval) 
    }, 

    render: function() { 
    return (
     <Forecast 
     city={this.props.routeParams.city} 
     isLoading={this.state.isLoading} 
     forecastData={this.state.forecastData} 
     onClick={this.handleClick} 
     /> 
    ) 
    } 
}); 

module.exports = ForecastContainer; 

我寫了我自己的預測部件之前，但有同樣的錯誤。所以我把泰勒的代碼，我仍然接受同樣沒有的onClick動作

他的代碼如下：

function DayItem (props) { 
    console.log('Day item',) 
    var date = getDate(props.day.dt); 
    var icon = props.day.weather[0].icon; 
    return (
    <div style={styles.dayContainer}> 
     <img style={styles.weather} src={'./app/images/weather-icons/' + icon + '.svg'} alt='Weather' /> 
     <h2 style={styles.subheader}>{date}</h2> 
     <h1>{props.text}</h1> 
    </div> 
) 
} 

function ForecastUI (props) { 

    return (
    <div style={{textAlign: 'center'}}> 
     <h1 style={styles.header}>{props.city}</h1> 
     <p style={styles.subheader}>Select a day</p> 
     <div style={styles.container}> 
     {props.forecast.list.map(function (listItem) { 
      return <DayItem key={listItem.dt} day={listItem} onClick= {props.onClick.bind(null, listItem)} /> 
     })} 
     </div> 
    </div> 
) 
} 

function Forecast (props) { 
    console.log('Forecast', props) 
    return (
    <div> 
     { 
     props.isLoading === true 
      ? <h1 style={styles.header}> Loading </h1> 
      : <ForecastUI city={props.city} forecast={props.forecastData} onClick={props.onClick}/> 
     } 
    </div> 
) 
} 

我渲染內ForecastUI的DayItem和道具都在通過，但我當點擊元素，沒有任何反應。

我已經包含在路線文件中的行：

<Route path='detail/:city' component={DetailContainer} /> 

我不知道哪裏出錯。

Answer 1

DayItem中的任何內容似乎都不可點擊。你想附加onClick到哪個元素？也許圖像，或h1。將它添加到DayItem。

function DayItem (props) { 
    console.log('Day item',) 
    var date = getDate(props.day.dt); 
    var icon = props.day.weather[0].icon; 
    return (
    <div style={styles.dayContainer}> 
     <img style={styles.weather} src={'./app/images/weather-icons/' + icon + '.svg'} alt='Weather' /> 
     <h2 style={styles.subheader}>{date}</h2> 
     <h1>{props.text}</h1> 
    </div> 
) 
} 

添加到IMG：

 <img style={styles.weather} src={'./app/images/weather-icons/' + icon + '.svg'} alt='Weather' onClick={props.onClick} />