Javascript 反应JS，总分

我是新手。现在我正在编写一个应用程序，用户可以在其中更新团队中每个团队成员的积分。增量和减量工作得很好，我在这里得到了很多帮助。现在我正试图展示每支球队的总得分。像下面的例子一样，我希望在点更改时更新总数。所以如果马丁得了一分，总数应该改为6。马修犯了一个错误，他就丢了一分。那么总数应该减少到5。但是我不知道怎么做。有人能帮我吗

---

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

---

我的代码： 反元件

import React，{Component}来自“React”；
从“react dom”导入react dom；
导出默认类计数器扩展组件{
render（）{
const{onIncrement，onDecrement}=this.props；
返回(
{this.formatCount（）}
onIncrement（this.props.counter）}>
添加
onDecrement（this.props.counter）}
disabled={this.props.counter.value==0？“disabled”：“}
>
删除
);
}
formatCount（）{
const{value}=this.props.counter；
返回值；
}
}
if（document.getElementById（“计数器”））{
render（，document.getElementById（“计数器”）；
}

计数器组件

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“/Counter”导入计数器；
类计数器扩展组件{
构造函数（）{
超级（）；
此.state={
计数器：[
{id:1，值：0}，
{id:2，值：0}，
{id:3，值：0}，
{id:4，值：0}，
{id:5，值：0}
]
};
}
手动增量（计数器）{
常量计数器=[…this.state.counters]；
const index=计数器。indexOf（计数器）；
计数器[索引]={…计数器}；
计数器[索引]。值++；
this.setState（{counters}）；
}
手抄表（柜台）{
常量计数器=[…this.state.counters]；
const index=计数器。indexOf（计数器）；
计数器[索引]={…计数器}；
计数器[索引]。值--；
this.setState（{counters}）；
}
handleReset（）{
const counters=this.state.counters.map（c=>{
c、 数值=0；
返回c；
});
this.setState（{counters}）；
}
render（）{
返回(
重置
{this.state.counters.map（counter=>(
))}
);
}
}
导出默认计数器；
if（document.getElementById（“计数器”））{
render（，document.getElementById（“计数器”）；
}

有两个选项：

计算呈现中的总计：

const total=this.state.counters.reduce（（求和，计数器）=>sum+counter.value，0）

（请参阅）

递增/递减计数器总数：

this.setState（oldState=>（{total:oldState.total+1}））

作为一个好习惯，您不应该使用

this.state

来获取

setState

的值，因为可能存在多个递增/递减事件。改为使用此语法：

setState（oldState=>{/*some code*/；returnnewstate}）

另外，最好传递

{…counter}

而不是

counter={counter}

，并使用

id

在

handleIncrement/handleDecrement

内部进行计数器。这样更容易跟踪道具的更改并避免不必要的渲染。在同一计数器上同时发生多个事件不会有问题。

有两个选项：

计算呈现中的总计：

const total=this.state.counters.reduce（（求和，计数器）=>sum+counter.value，0）

（请参阅）

递增/递减计数器总数：

this.setState（oldState=>（{total:oldState.total+1}））

作为一个好习惯，您不应该使用

this.state

来获取

setState

的值，因为可能存在多个递增/递减事件。改为使用此语法：

setState（oldState=>{/*some code*/；returnnewstate}）

---

另外，最好传递

{…counter}

而不是

counter={counter}

，并使用

id

在

handleIncrement/handleDecrement

内部进行计数器。这样更容易跟踪道具的更改并避免不必要的渲染。在同一计数器上同时发生多个事件不会有问题。

您可以通过向状态添加另一个属性以及名为

total

的计数器来添加总计行。调用递增、递减和重置时，需要更改此总值

下面是如何实现这一点的演示：

类计数器扩展React.Component{
render（）{
const{onIncrement，onDecrement}=this.props；
返回(
{this.formatCount（）}
onIncrement（this.props.counter）}>
添加
onDecrement（this.props.counter）}
disabled={this.props.counter.value==0？“disabled”：“}
>
删除
);
}
formatCount（）{
const{value}=this.props.counter；
返回值；
}
}
类计数器扩展React.Component{
构造函数（）{
超级（）；
此.state={
计数器：[
{id:1，值：0}，
{id:2，值：0}，
{id:3，值：0}，
{id:4，值：0}，
{id:5，值：0}
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"));
}