Reactjs 计数器 onClick

Question

使用 MUI Boxes 我正在尝试显示一个计数器变量，每次 these 个单元格之一时该变量都会递增 clicked.I 尝试添加一个计数器作为单元格的状态，每当颜色出现时该单元格就会递增每个 Cell 组件的更改（每次单击一个单元格时）但似乎不起作用。

  
// =====================================================================================================================
//  C O M P O N E N T
// =====================================================================================================================

class Cell extends React.Component {
    state = {
        color: '#bbdefb',
        count: 0,
    };

    onChange = () => {
        this.setState({color: 'red'});
        this.setState({count: count++});
    };

    render() {
        return (
            <div
                style={{
                    backgroundColor: this.state.color,
                    width: 20,
                    height: 20,
                    opacity: '60%',
                    outlineStyle: 'solid',
                    outlineWidth: '1px',
                    outlineColor: '#1a237e',
                }}
                onClick={this.onChange}
            />
        );
    }
}

class Main extends React.PureComponent {
    render() {
        return (
            <Box sx={SX.root}>
                <Box sx={SX.page}>
                    <MathGrid sx={SX.math1} />
                    <Box sx={SX.firstrow}>
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                    </Box>
                    <Box sx={SX.secondrow}>
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                    </Box>
                    <Box sx={SX.thirdrow}>
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                    </Box>
                    <Box sx={SX.forthrow}>
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                        <Cell />
                    </Box>
                </Box>
                <Box sx={SX.header} />
                <Box sx={SX.footer}>
                    <Box sx={SX.counter}>{count}</Box>
                </Box>
            </Box>
        );
    }

    // -----------------------------------------------------------------------------------------------------------------
    //  I N T E R N A L
    // -----------------------------------------------------------------------------------------------------------------
}

// =====================================================================================================================
//  E X P O R T
// =====================================================================================================================
export default Main;

Answer 1

4 件事：

如果您在单个 Cell 组件上定义计数，则组件 Cell 有一个计数（因此，如果您想要对组进行计数，则需要直接在 Main 上创建一个计数 _ 您在主要组件上使用了计数，但它来自哪里，您如何使用它？ _ 在 setState 组件之后直接 re-render 所以你永远不会超过你的第二个 setState（你的更新颜色，而不是你的计数）
要更新 setState 上的计数，您需要调用 this.state.count，计数未定义
你不能使用 this.state.count++ 因为它是可变的但你可以使用 this.state.count + 1

像这样尝试单元格并查看带有注释不同 setState 的行为：

class Cell extends React.Component {
  state = {
    color: "#bbdefb",
    count: 0,
  };

  onChange = () => {
    this.setState({ color: "red" });
    this.setState({ count: this.state.count++ });
    // this.setState({ color: "red", count: this.state.count + 1 });
  };

  render() {
    return (
      <div
        style={{
          backgroundColor: this.state.color,
          width: 20,
          height: 20,
          opacity: "60%",
          outlineStyle: "solid",
          outlineWidth: "1px",
          outlineColor: "#1a237e",
        }}
        onClick={this.onChange}
      >
        {this.state.count}
      </div>
    );
  }
}

Answer 2

所以 :

如果你想要1个计数器，你需要把计数放在主要组件上
如果你只想计算一个，不是加法而是赋值（值=1）或者你需要创建一个验证来知道你的元素是否需要再次递增
如果您每次都创建相同的元素（4 个框，每个框内有 9 个单元格），请花时间查看数组 (turfu) 上的迭代渲染
花时间将你的解决方案与此进行比较，如果你花时间写的比 copy/past
更有效

阅读 React class 组件的文档

class 单元格扩展 React.Component { 状态={ 颜色：“#bbdefb”，已检查：假， };

onChange = () => {
  if (!this.state.isChecked) {
    this.props.addCount();
    this.setState({ color: "red", isChecked: true });
  }
};

render() {
  return (
    <div
      style={{
        backgroundColor: this.state.color,
        width: 20,
        height: 20,
        opacity: "60%",
        outlineStyle: "solid",
        outlineWidth: "1px",
        outlineColor: "#1a237e",
      }}
      onClick={this.onChange}
    >
      {this.state.count}
    </div>
  );
}

}

class 主要扩展 React.PureComponent { 状态={ 计数：0， };

addToCount = () => {
  this.setState({ count: this.state.count + 1 });
};

render() {
  return (
    <Box>
      <Box>
        <Box>
          <Cell addCount={this.addToCount} />
          <Cell addCount={this.addToCount} />
        </Box>
      </Box>
      <Box />
      <Box>
        <Box>{this.state.count}</Box>
      </Box>
    </Box>
  );
}

导出默认 Main；

告诉我是否可以，如果你明白一切是什么。

Reactjs 计数器 onClick

Reactjs counter onClick

javascript

reactjs

counter