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) {
    ...

Answer 2

就像UjinT34所说的那样，您使用===运算符将字符串与数字进行比较。

对于点击处理程序，更优雅的解决方案是：

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 = url => {
      this.setState({
        imgUrl: url
      });
  };

  render() {
    let styles = {
      backgroundImage: `url(${this.state.imgUrl})`,
      backgroundSize: "cover",
      backgroundPosition: "0% 70%",
      overflow: "hidden"
    };
    return (
      <>
        <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(weather)}}>
              Local Weather
            </NavLink>
            <NavLink to="/maincontent/snow" id="2" onClick={()=>{this.clickHandler(snow)}}>
              Snow Report
            </NavLink>
            <NavLink to="/maincontent/river" id="3" onClick={()=>this.clickHandler(river)}>
              River Flows
            </NavLink>
          </ul>
        </header>
      </>
    );
  }
}

为什么clickHandler未更新状态？

2 个答案: