javascript - 为什么 clickHandler 没有更新状态？

Question

我正在尝试设置一个随事件按钮而变化的背景，clickHandler 将向我显示按钮的正确 ID，但随后无法更新状态...我错过了什么？

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import river from "../img/river.jpg";
import snow from "../img/snow.jpeg";
import weather from "../img/weather.jpg";

export default class LowerHeader extends Component {
  state = {
    imgUrl: river
  };

  clickHandler = e => {
    if (e.target.id === 1) {
      this.setState({
        imgUrl: weather
      });
    } else if (e.target.id === 2) {
      this.setState({
        imgUrl: snow
      });
    } else if (e.target.id === 3) {
      this.setState({
        imgUrl: river
      });
    }
    console.dir(e.target);
  };

  render() {
    let styles = {
      backgroundImage: `url(${this.state.imgUrl})`,
      backgroundSize: "cover",
      backgroundPosition: "0% 70%",
      overflow: "hidden"
    };
    return (
      <React.Fragment>
        <div
          className="link-bg-img"
          style={styles}
          alt="Background related to tab chosen"
        />
        <header className="lower-header">
          <ul>
            <NavLink
              to="/maincontent/weather"
              id="1"
              onClick={this.clickHandler}
            >
              Local Weather
            </NavLink>
            <NavLink to="/maincontent/snow" id="2" onClick={this.clickHandler}>
              Snow Report
            </NavLink>
            <NavLink to="/maincontent/river" id="3" onClick={this.clickHandler}>
              River Flows
            </NavLink>
          </ul>
        </header>
      </React.Fragment>
    );
  }
}

我希望随页面加载的初始状态保持不变......它可以工作。然后应该随着每次点击按钮而改变。谢谢!

Answer 1

e.target.id 是一个字符串，您可以使用 === 将其与数字进行比较。由于类型不同而失败。

使用这样的东西:

clickHandler = e => {
    const id = parseInt(e.target.id, 10);
    if (id === 1) {
    ...