javascript - React JS，总分

Question

我是 React js 新手。现在我正在编写一个应用程序，用户可以在其中更新团队中每个团队成员的积分。递增和递减工作得很好，我在这里得到了很多帮助。现在我正在尝试显示每支球队的总得分。就像下面的例子一样，我希望当点数改变时总数也随之更新。因此，如果马丁得到一分，总分应该变为 6。而当马修犯错时，他就会失去一分。那么总数应该减少到 5。但我不知道如何做到这一点。有人可以帮助我吗？

<小时/>

示例:

约翰福音0
马太福音3
马丁0
克里斯2
安娜0
总数:5

<小时/>

我的代码:

计数器组件

import React, { Component } from "react";
import ReactDOM from "react-dom";

export default class Counter extends Component {
    render() {
        const { onIncrement, onDecrement } = this.props;
        return (
            <div>
                <span>{this.formatCount()}</span>
                <button onClick={() => onIncrement(this.props.counter)}>
                    Add
                </button>

                <button
                    onClick={() => onDecrement(this.props.counter)}
                    disabled={this.props.counter.value === 0 ? "disabled" : ""}
                >
                    Delete
                </button>
            </div>
        );
    }

    formatCount() {
        const { value } = this.props.counter;
        return value;
    }
}

if (document.getElementById("counter")) {
    ReactDOM.render(<Counter />, document.getElementById("counter"));
}

计数器组件

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Counter from "./counter";

class Counters extends Component {
    constructor() {
        super();
        this.state = {
            counters: [
                { id: 1, value: 0 },
                { id: 2, value: 0 },
                { id: 3, value: 0 },
                { id: 4, value: 0 },
                { id: 5, value: 0 }
            ]
        };
    }
    handleIncrement(counter) {
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index] = { ...counter };
        counters[index].value++;
        this.setState({ counters });
    }

    handleDecrement(counter) {
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index] = { ...counter };
        counters[index].value--;
        this.setState({ counters });
    }

    handleReset() {
        const counters = this.state.counters.map(c => {
            c.value = 0;
            return c;
        });
        this.setState({ counters });
    }

    render() {
        return (
            <div>
                <button onClick={this.handleReset.bind(this)}>Reset</button>
                {this.state.counters.map(counter => (
                    <Counter
                        key={counter.id}
                        onIncrement={this.handleIncrement.bind(this)}
                        onDecrement={this.handleDecrement.bind(this)}
                        counter={counter}
                    />
                ))}

            </div>
        );
    }
}

export default Counters;

if (document.getElementById("counters")) {
    ReactDOM.render(<Counters />, document.getElementById("counters"));
}

Answer 1

您可以通过向您的状态添加另一个属性以及名为 total 的计数器来添加总计行。在调用递增、递减和重置时需要更改该总值。

下面演示了如何实现这一点:

class Counter extends React.Component {
    render() {
        const { onIncrement, onDecrement } = this.props;
        return (
            <div>
                <span>{this.formatCount()}</span>
                <button onClick={() => onIncrement(this.props.counter)}>
                    Add
                </button>

                <button
                    onClick={() => onDecrement(this.props.counter)}
                    disabled={this.props.counter.value === 0 ? "disabled" : ""}
                >
                    Delete
                </button>
            </div>
        );
    }

    formatCount() {
        const { value } = this.props.counter;
        return value;
    }
}


class Counters extends React.Component {
    constructor() {
        super();
        this.state = {
            counters: [
                { id: 1, value: 0 },
                { id: 2, value: 0 },
                { id: 3, value: 0 },
                { id: 4, value: 0 },
                { id: 5, value: 0 }
            ],
            total: 0
        };
    }
    handleIncrement(counter) {
        const total = this.state.total + 1;
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index] = { ...counter };
        counters[index].value++;
        this.setState({ counters: counters, total: total });
    }

    handleDecrement(counter) {
        const total = this.state.total - 1;
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index] = { ...counter };
        counters[index].value--;
        this.setState({ counters: counters, total: total });
    }

    handleReset() {
        const total = 0;
        const counters = this.state.counters.map(c => {
            c.value = 0;
            return c;
        });
        this.setState({ counters: counters, total: total });
    }

    render() {
        return (
            <div>
                <button onClick={this.handleReset.bind(this)}>Reset</button>
                {this.state.counters.map(counter => (
                    <Counter
                        key={counter.id}
                        onIncrement={this.handleIncrement.bind(this)}
                        onDecrement={this.handleDecrement.bind(this)}
                        counter={counter}
                    />
                ))}
                <div>Total: {this.state.total}</div>
            </div>
        );
    }
}

ReactDOM.render(
  <Counters/>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

或者，您可以跳过在状态中存储total值，并根据counters值动态查找总值，如下所示:

<div>Total: {this.state.counters.map((counter) => { return counter.value; }).reduce((a, b) => a + b, 0);}</div>