Question

* 已更新

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

要在单击按钮组件时使用Callack更新状态值
在其他组件中显示结果
当我按下按钮时，我的状态没有更新

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组件中，道具是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>
  );
}

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

2 个答案: