在反应中获取选择值的总和以在屏幕上呈现

Question

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

父组件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>
      </>
    );
  }
}

子组件 Card.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，应该声明unsuccessCount。