Question

我有一个董事会编号列表。我正在导出此列表并将其映射到该列表中，以创建所需的元素。现在，我需要每个元素都有自己的计数，当我单击其中一个元素时，需要在被点击的元素后面附加◘符号

问题在于onClick事件正在更新我的所有元素。

Here是一个实时演示，下面也是我当前的代码：

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: ''
    }
  }
  
  appendChild(id) {
    console.log(id) // I am successfuly getting the id of the clicked element

    // This code should update only the id that I have clicked
    this.setState(prevState => {
      return {
        count: prevState.count + '◘'
      }
    });
  }

  render() {
    const boardItems = BoardNumbers.map((item) => 
      <div key={item.id} className={(item.color === "black") ? 'black-item' : 'red-item'}>
        <div onClick={this.appendChild.bind(this, item.id)} className="value">{item.id}
          {this.state.count}
        </div>
      </div>
    );

    return (
      <>
        {boardItems}
      </>
    )
  }
}

Answer 1

您需要将所有items保存在state中，以便可以更新特定项目的count。我还添加了comments，Demo

import React from 'react';
import { BoardNumbers } from './BoardNumbers';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: BoardNumbers, // all board items 
      currentItem: {count: ''}

    }
  }

//this function is used to update count and for setting current clicked item
  updateItem =(item)=>{
    const updatedItem ={...item, count: item.count ? item.count + '◘' :'◘' }
    this.setState({currentItem: updatedItem})
    console.log(updatedItem)
    return updatedItem;
  }
  
  appendChild(id) {
    console.log(id)
  //filter the required item to update its count
    const items = this.state.items.map((item)=> item.id===id ? this.updateItem(item) : item);
    
    this.setState({items}) //set state with new items
  }

  render() {
    const boardItems = this.state.items.map((item) => 
      <div key={item.id} className={(item.color === "black") ? 'black-item' : 'red-item'}>
        <div onClick={this.appendChild.bind(this, item.id)} className="value">{item.id}
        {item.count && item.count}
        </div>
      </div>
    );

    return (
      <>
        <div className="mainWrapper">
            <div className="container-first">
            <div className="zero-item">
              <div className="value">0</div>
            </div>

            {boardItems}

            <div className="column-item">
              <div className="value">2-1</div>
            </div>
            <div className="column-item">
              <div className="value">2-1</div>
            </div>
            <div className="column-item">
              <div className="value">2-1</div>
            </div>
          </div>

          <div className="container-second">
            <div className="doz-item">
              <div>1st 12</div>
            </div>
            <div className="doz-item">
              <div>2nd 12</div>
            </div>
            <div className="doz-item">
              <div>3rd 12</div>
            </div>
          </div>
          
          <div className="container-third">
            <div className="outside-section">
              <div>1-18</div>
            </div>
            <div className="outside-section">
              <div>EVEN</div>
            </div>
            <div className="outside-section">
              <div><div className="rhomb-red"></div></div>
            </div>
            <div className="outside-section">
              <div><div className="rhomb-black"></div></div>
            </div>
            <div className="outside-section">
              <div>ODD</div>
            </div>
            <div className="outside-section">
              <div>19-36</div>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default App;

Answer 2

您只有一个count状态。每个数字都需要一个count状态。

在您的示例中，行为是：单击元素时，会将符号添加到单个状态变量中。单击另一个元素时，将其他符号添加到同一单个状态变量。对于每个数字，您将打印相同的单个状态变量。这就是为什么在每个字段中符号的数量都相同的原因。

按item.id 4-> count = 1x符号
按item.id 7-> count = 2x个符号
按item.id 9-> count = 3x个符号

然后显示具有相同计数状态变量的所有不同item.id。

反应-仅针对点击的元素更新状态

2 个答案: