Question

我正在通过Tyler Mcginnis＆＃39;反应天气应用程序教程，我坚持第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;

之前我编写了自己的预测组件，但出现了同样的错误。所以我使用了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：

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

React组件未触发onClick事件

1 个答案: