反応コンポーネントが発火しないonClickイベント

Question

私はTyler McginnisのReact weather appチュートリアルを通して作業しています。ステップ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} />