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>
    );
  }
}

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

标签： javascriptreactjs

Answer 1

e.target.id是一个字符串，你将它与一个数字进行比较===。由于类型不同，它失败了。

使用这样的东西：

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