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;

我之前也写过自己的 Forecast 组件，但出现了同样的错误。所以我拿了 Tyler 的代码，但我仍然收到同样的 no 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 style={styles.weather} src={'./app/images/weather-icons/' + icon + '.svg'} alt='Weather' onClick={props.onClick} />