Javascript 反应-点击鼠标更新任意随机项目/组件

我的反应有问题。假设我有一个项目数组（例如，项目有id和计数器以及它自己的项目）。我想增加任何鼠标点击（比如点击一个按钮）时随机选择的项目的计数器。 请问如何优雅地做到这一点

非常感谢

另外，每个项目都有一个增量键，我们知道项目的数量。但我听说用DOM的id来获取项目不是一个好的做法。有什么建议吗？代码如下

class Hello extends React.Component {
    render() {
        const items = [
          { id: 1, counter: 11, items: [{ id: 2, counter: 22, items: [] }] },
          { id: 3, counter: 33, items: [] },
          { id: 4, counter: 44, items: [] },
        ];
        return (
            <div>
              <Items items={items} />
              <button>Click on me to increase the counter of any random item</button>
            </div>
        );
   }
}

class Items extends React.Component {
    render() {
        return (
            <ul>
                {this.props.items.map(item => (
                    <Item key={item.id} item={item} />
                ))}
            </ul>
        );
    }
   }

class Item extends React.Component {
    render() {
        return (
            <li>
                counter={this.props.item.counter}
                <Items items={this.props.item.items} />
            </li>
        );
    }
}

类Hello扩展了React.Component{
render（）{
常数项=[
{id:1，计数器：11，项：[{id:2，计数器：22，项：[]}，
{id:3，计数器：33，项目：[]}，
{id:4，计数器：44，项目：[]}，
];
返回(
单击我以增加任意项目的计数器
);
}
}
类项扩展了React.Component{
render（）{
返回(

{this.props.items.map（item=>(
))}

);
}
}
类项扩展了React.Component{
render（）{
返回(

计数器={this.props.item.counter}

);
}
}

您好，请检查此示例。希望对你有帮助

import React from "react";

export class Hello extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            items: [
                {id: 1, counter: 11, items: [{id: 2, counter: 22, items: []}]},
                {id: 2, counter: 22, items: []},
                {id: 3, counter: 33, items: []},
                {id: 4, counter: 44, items: []},
                {id: 5, counter: 55, items: []},
            ]
        }
    }

    handleClick = (e) => {
        e.preventDefault();
        let number = this.randomNumber(1, 5);
        const items = JSON.parse(JSON.stringify(this.state.items));
        items.find(item => item.id === number).counter++;
        this.setState({items: items});
    };

    randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    render() {
        console.log('test');

        return (
            <div>
                <Items items={this.state.items}/>
                <button onClick={this.handleClick}>Click on me to increase the counter of any random item</button>
            </div>
        );
    }
}

class Items extends React.Component {
    render() {
        return (
            <ul>
                {this.props.items.map(item => (
                    <Item key={item.id} item={item}/>
                ))}
            </ul>
        );
    }
}

class Item extends React.Component {
    render() {
        return (
            <li>
                counter={this.props.item.counter}
                <Items items={this.props.item.items}/>
            </li>
        );
    }
}

从“React”导入React；
导出类Hello扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[
{id:1，计数器：11，项：[{id:2，计数器：22，项：[]}，
{id:2，计数器：22，项目：[]}，
{id:3，计数器：33，项目：[]}，
{id:4，计数器：44，项目：[]}，
{id:5，计数器：55，项目：[]}，
]
}
}
handleClick=（e）=>{
e、 预防默认值（）；
设number=this.randomNumber（1,5）；
const items=JSON.parse（JSON.stringify（this.state.items））；
items.find（item=>item.id==number）.counter++；
this.setState（{items:items}）；
};
随机数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
render（）{
console.log（'test'）；
返回(
单击我以增加任意项目的计数器
);
}
}
类项扩展了React.Component{
render（）{
返回(

{this.props.items.map（item=>(
))}

);
}
}
类项扩展了React.Component{
render（）{
返回(

计数器={this.props.item.counter}

);
}
}

UP！也许为了实现这一点，我应该使用其他的js框架而不是ReactJS，好吗？这是一个很小的问题-任何

js

框架都可以解决这个问题，包括

React

。我建议您研究如何处理事件，并在

React

-中声明。当您遇到问题时，请回来，以便我们能够提供帮助。谢谢，goto1。嗯，我认为这是一个有点棘手的问题。处理事件不是问题。问题是检索随机选择的项并在组件本身之外更新其状态。那你现在会怎么说？有可能吗？您的意思是更新

父组件中
子组件的
状态
？如果是，是的，那是可能的-。谢谢你，卡比尔。这应该行得通。但这是一个非常明显的解决方案，我担心性能。在我们的示例中，我们有一个嵌套级别和5个项目。我们每次都将重新渲染所有这些内容。如果我们有数千个项目和级别，它会工作得很快吗？@JohnMarkwell，不确定您的应用程序，但根据您的要求，您必须更新状态，并且当您更新状态时，默认情况下，react将重新呈现组件。有一种方法可以避免使用React.memo重新呈现，但我们需要根据应用程序设计来使用它。@Khabir您不应该执行
this.state.items.find（item=>item.id==number）。counter++
然后执行
this.setState（{items:this.state.items}）
Hi@goto1，您建议我，不应该这样做，但您没有告诉我们应该如何处理需求。@Khabir您不应该直接改变状态，这就是您现在正在做的。您需要复制
项
数组和对象本身，然后更新计数器和数组-