Reactjs Button组件在按下时不更新状态

Question

*更新

我的状态没有更新任何按钮。 如何将 button.js 上按下的值作为 handleChange 的条件传递？

1. 希望在单击按钮组件时使用回调更新状态值
2. 在另一个组件中显示结果
3. 当我按下按钮时，我的状态没有更新

App.js

  const [neutral, setNeutral] = useState(0);
  const [bad, setBad] = useState(0);
  // const [all, setAll] = useState(0);

  const handleChange = (value) => {
    // const data = ["good", "bad", "neutral"];
    if (value === "good") {
      setGood(good + 1);
      console.log(value);
    } else if (value === "neutral") {
      setNeutral(neutral + 1);
    } else if (value === "bad") {
      setBad(bad + 1);
    }
  };
Return (
    <Container className="Container">
      <h2>Give Feedback</h2>
      <Button onClick={handleChange} />
      {/* statictics  */}
      <Statistics />
    </Container>
  );
}

Button.js

export default function Button(props) {
  return (
    <div>
      <button value="good" onChange={props.handleChange}>
        Good
      </button>
      <button value="neutral" onClick={props.handleChange}>
        Neutral
      </button>
      <button value="bad" onClick={props.handleChange}>
        Bad
      </button>
    </div>
  );
}

收到新错误，建议我添加生命周期方法。 我不知道这是否矫枉过正，以及是否有更简单的方法来实现此计数解决方案。

error received after changes

Answer 1

乍一看，你的代码有几个问题：

• 在您的button 组件中，您正在寻找props.handleChange；但是在您的App 组件中，您传入的是onClick；你应该要么做<Button handleChange={handleChange} />，要么在你的Button组件里做onClick={props.onClick}（我个人更喜欢后者）
• React 需要你用首字母大写来命名你的组件，所以button -> Button
• 在您的 handleChange 函数中，您期望 value 进入，但您将收到点击事件，您应该从中提取价值

Answer 2

在Button组件中，props是handleChange，所以你需要像下面那样做

App.js 中针对您的案例所做的更改：

import React, { useState } from "react";
import "./styles.css";
import Button from "./Button";

export default function App() {
  const [good, setGood] = useState(0);
  const [neutral, setNeutral] = useState(0);
  const [bad, setBad] = useState(0);

  const handleChange = value => {
    // const data = ["good", "bad", "neutral"];
    if (value === "good") {
      setGood(good);
      console.log(value);
    } else if (value === "neutral") {
      setNeutral(neutral);
      console.log(value);
    } else if (value === "bad") {
      setBad(bad);
      console.log(value);
    }
  };

  return (
    <div>
      <h2>Give Feedback</h2>
      <Button handleChange={handleChange} />
      {/* statictics  */}
    </div>
  );
}

更新案例的按钮组件更改

 import React from "react";
// import { Button, Table, Container } from "react-bootstrap";

export default function Button(props) {
  return (
    <div>
      <button value="good" onClick={() => props.handleChange("good")}>
        Good
      </button>
      <button value="neutral" onClick={() => props.handleChange("neutral")}>
        Neutral
      </button>
      <button value="bad" onClick={() => props.handleChange("bad")}>
        Bad
      </button>
    </div>
  );
}