在react中获取要在屏幕上渲染的选择值的总和

Question

我正在构建一个应用程序，该应用程序渲染9个框，每个框具有4个不同的选择值。选择的选项有：关闭成功、关闭不成功、回调和打开。我正试图找到一种方法来计算所有成功关闭和所有未成功关闭的次数，并将数字呈现在屏幕顶部。解决这一问题的最佳方法是什么？如果有人能为我指明正确的方向，我将不胜感激。非常感谢。

父组件BackGround.js(调用API，设置状态，然后映射并渲染9个卡组件。(：

import React, { Component } from "react";
import axios from "axios";
import Card from "./Card";
export default class Background extends Component {
constructor(props) {
super(props);
this.state = {
people: [],
};
this.handleRerender = this.handleRerender.bind(this);
}
async handleRerender() {
let data = await axios
.get(`https://randomuser.me/api/?results=9`)
.catch((error) => {
alert("Error ========> Fetching Failed Please reload page", error);
this.handleRerender();
});
this.setState({
people: data.data.results,
});
}
async componentDidMount() {
let data = await axios
.get(`https://randomuser.me/api/?results=9`)
.catch((error) => {
alert("Error ========> Fetching Failed", error);
this.handleRerender();
});
this.setState({
people: data.data.results,
});
}
render() {
const people = this.state.people.map((person) => {
return (
<Card
key={person.cell}
name={`${person.name.first}  ${person.name.last}`}
email={person.email}
phone={person.phone}
company={person.location.city}
/>
);
});
return (
<>
<div className='top'>
<h1 className="title">XpressLeads</h1>
<div className="btn">
<button onClick={this.handleRerender}>Get new leads</button>
</div>
</div>
<div className="container">{people}</div>
</>
);
}
}

子组件卡片.js(渲染选择框和一些其他道具(

import React from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";
class Card extends React.Component {
state = {
isEmailed: false,
isCalled: false,
copied: false,
selectValue: "",
};
handleIsEmailedChange = () => {
this.setState({
isEmailed: !this.state.isEmailed,
});
};
handleIsCalledChange = () => {
this.setState({
isCalled: !this.state.isCalled,
});
};
handleCopy = () => {
this.setState({
copied: !this.state.copied,
});
setTimeout(() => {
this.setState({ copied: false });
}, 1000);
};
handleDropdownChange = (e) => {
this.setState({ selectValue: e.target.value });
};
handleCount = () => {
const success = this.state.selectValue === "success";
const fail = this.state.selectValue === "fail";
const callback = this.state.selectValue === "callback";
if (success) {
return <p>success</p>;
}
if (fail) {
return <p>fail</p>;
}
if (callback) {
return <p>callback</p>;
}
};
render() {
const success = this.state.selectValue === "success";
const fail = this.state.selectValue === "fail";
const callback = this.state.selectValue === "callback";
console.log(this.state.totalSuccess);
return (
<div
className={
success
? "box success"
: fail
? "box fail"
: callback
? "box callback"
: "box"
}
>
<div className="outcome">
<ion-icon name="podium-outline"></ion-icon>
<label htmlFor="outcome">Outcome {"  "}</label>
<select name="outcome" onChange={this.handleDropdownChange}>
<option value="open">open</option>
<option value="success">close successful</option>
<option value="fail">close unsuccessful</option>
<option value="callback">callback </option>
</select>
</div>
{this.handleCount()}
<h4>
<ion-icon name="people-circle-outline"></ion-icon>Name:{" "}
{this.props.name}
</h4>
<h4>
<ion-icon name="business-outline"></ion-icon>
Company: {this.props.company}
</h4>
<h4>
<ion-icon name="mail-outline"></ion-icon>
Email: {"  "}
<a className="link" href={`mailto:${this.props.email}`}>
{this.props.email}
</a>
<input
type="checkbox"
checked={this.state.isEmailed}
onChange={this.handleIsEmailedChange}
/>
emailed
</h4>
<h4 className="number">
<ion-icon name="call-outline"></ion-icon>Number: {this.props.phone}
<input
type="checkbox"
checked={this.state.isCalled}
onChange={this.handleIsCalledChange}
/>
called
<CopyToClipboard text={this.props.phone}>
<button className="copy-btn" onClick={this.handleCopy}>
{this.state.copied ? "copied" : "copy"}
</button>
</CopyToClipboard>
</h4>
</div>
);
}
}
export default Card;

Answer 1

您是否尝试在handleDropdownChange方法中计数？也许像这个

handleDropdownChange = (e) => {
let { successCount, unsuccessCount } = this.state;
switch(e.target.value) {
case 'success':
successCount += 1;
break;
case 'fail':
unsuccessCount += 1;
break;
default:
break;
}
this.setState({
successCount: successCount,
unsuccessCount: unsuccessCount,
selectValue: e.target.value
});
};

对于successCount，应声明invalidCount。