Question

我正在使用weatherAPI创建一个应用程序作为学习ReactJS的项目。我创建了一个方法来单击console.log事件目标的属性。但是，当我触发on click事件时，控制台中记录的值仅在20％的时间内记录为期望值。否则它将记录为未定义。

主要应用代码-

export class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      temperature: undefined,
      city: undefined,
      country: undefined,
      humidity: undefined,
      description: undefined,
    }

    this.getWeather = this.getWeather.bind(this);
  }

  getWeather = (e) => {
    e.preventDefault();
    const cityId = e.target.value;
    console.log(cityId);
  }


  render() {
    return (
      <div className="container">
        <Header />
        <Button city="City1" getWeather={this.getWeather} />
        <Button city="City2" getWeather={this.getWeather} />
      </div>
    )
  }
}

按钮组件代码-

export default function Button(props) {
    return (
        <button className="btn btn-outline-primary" name={props.city} value={props.city} onClick={props.getWeather}>
            <h2>{props.city}</h2>
        </button>
    )
}

如果是垃圾邮件，请单击任意一个按钮，大多数情况下都会记录undefined，其中偶尔会记录City1或City2，如下所示

>(29) undefined
>(11) City1
>(32) undefined
>(2)  City2

事件目标随机记录为未定义或期望值

0 个答案: