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} />