Reactjs 按钮组件在按压时未更新状态

Question

*已更新

我的状态没有针对任何按钮更新。 如何将按下按钮的值传递.js作为句柄更改的条件？

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

应用.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>
);
}

按钮.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>
);
}

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

更改后收到错误

Answer 1

乍一看，您的代码存在几个问题：

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

Answer 2

在按钮组合中，道具是handleChange，所以你需要像下面这样做

适用于您的案例的应用.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>
);
}