在React TS中,可以使用state来对单个onClick上的多个按钮进行计数。具体的实现步骤如下:
以下是一个简单的示例代码:
import React, { Component } from 'react';
class ButtonCounter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
handleClick = () => {
this.setState(prevState => ({
count: prevState.count + 1,
}));
}
render() {
return (
<div>
<button onClick={this.handleClick}>按钮1</button>
<button onClick={this.handleClick}>按钮2</button>
<button onClick={this.handleClick}>按钮3</button>
<span>点击次数:{this.state.count}</span>
</div>
);
}
}
export default ButtonCounter;
在上面的示例中,我们定义了一个ButtonCounter组件,包含了三个按钮和一个展示计数的<span>标签。每当点击其中一个按钮时,handleClick函数会被调用,通过setState更新count的值,并重新渲染页面。
需要注意的是,以上示例是基于React和TypeScript的,如果你还没有配置好React和TypeScript环境,你需要先进行相应的安装和配置。
领取专属 10元无门槛券
手把手带您无忧上云