Javascript 将类添加到此按钮

我在一个页面上有多个按钮，当用户单击每个按钮时，它应该显示一个加载，我使用

类

，但有一个问题，它将加载添加到所有按钮，但我只需要将类添加到

此

按钮（不是全部单击！）

您可以看到一个简单的演示

handleClick = (e) => {
    this.setState({
  loading: 'loading'
  })
}

我知道所有按钮都使用相同的

状态

，但如何在单击按钮时使用更改的

状态

。最佳做法是什么？ 我应该使用

ref

？或者我应该使用多个状态？

---

但我不知道将来会在这个页面上添加多少按钮。提供解决方案或技巧的任何想法。

您可以使用handleClick方法轻松获得所选的

按钮。然后切换
加载
类。这是一张工作票

const{
按钮
}=语义反应
类应用程序扩展了React.Component{
handleClick=（e）=>{
//您可以根据需要使用.add或.toggle。
e、 target.classList.toggle（'load'）；
}
render（）{
返回(
按钮1
按钮2
按钮3
)
}
}
ReactDOM.render（，document.getElementById（'app'））；
您可以使用handleClick方法轻松获取所选的
按钮。然后切换
加载
类。这是一张工作票

const{
按钮
}=语义反应
类应用程序扩展了React.Component{
handleClick=（e）=>{
//您可以根据需要使用.add或.toggle。
e、 target.classList.toggle（'load'）；
}
render（）{
返回(
按钮1
按钮2
按钮3
)
}
}
ReactDOM.render（，document.getElementById（'app'））；
这里是单独处理点击事件的动态按钮绑定，甚至添加了Axios API调用，以便在API响应中您也可以删除该按钮上的加载。

这是一张工作票


const{
按钮
}=语义反应
类应用程序扩展了React.Component{
handleClick=（名称）=>{
this.refs[name].ref.classList.add（'load'）；
axios.get（）https://simonbreiter.com/wp-json/wp/v2/projects?_embed')
。然后（响应=>{
设置超时（（）=>{
此.removeLoading（名称）
}, 3000)
})
.catch（错误=>console.log（错误））；
}
removeLoading=（名称）=>{
this.refs[name].ref.classList.remove（'load'）；
}
render（）{
返回(
{[…数组（3）].map（（数据，索引）=>{
常数btnIndex=index+1；
返回这个.handleClick（“btn”+btnIndex）}>按钮{btnIndex}
})}
)
}
}
ReactDOM.render（，document.getElementById（'app'））
这里是单独处理点击事件的动态按钮绑定，甚至添加了Axios API调用，以便在API响应中您也可以删除该按钮上的加载。

这是一张工作票


const{
按钮
}=语义反应
类应用程序扩展了React.Component{
handleClick=（名称）=>{
this.refs[name].ref.classList.add（'load'）；
axios.get（）https://simonbreiter.com/wp-json/wp/v2/projects?_embed')
。然后（响应=>{
设置超时（（）=>{
此.removeLoading（名称）
}, 3000)
})
.catch（错误=>console.log（错误））；
}
removeLoading=（名称）=>{
this.refs[name].ref.classList.remove（'load'）；
}
render（）{
返回(
{[…数组（3）].map（（数据，索引）=>{
常数btnIndex=index+1；
返回这个.handleClick（“btn”+btnIndex）}>按钮{btnIndex}
})}
)
}
}
ReactDOM.render（，document.getElementById（'app'））
根据我对这个问题的理解，更好的方法是将此类通用组件的状态处理/维护到它自己的组件级别。我根据您提供的代码准备了一个示例。


const{
按钮
}=语义反应
类ButtonComp扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：错误
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
这是我的国家({
正在加载：！this.state.loading
});
}
render（）{
返回(
按钮1
)
}
}
类应用程序扩展了React.Component{
//将状态管理移动到组件级别
render（）{
返回(
)
}
}
ReactDOM.render（，document.getElementById（'app'））
根据我对这个问题的理解，更好的方法是将此类通用组件的状态处理/维护到它自己的组件级别。我根据您提供的代码准备了一个示例。


const{
按钮
}=语义反应
类ButtonComp扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：错误
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
这是我的国家({
正在加载：！this.state.loading
});
}
render（）{
返回(
按钮1
)
}
}
类应用程序扩展了React.Component{
//将状态管理移动到组件级别
render（）{
返回(
)
}
}
ReactDOM.render（，document.getElementById（'app'））
您可以创建一组按钮。然后，您可以将所选索引与迭代索引进行比较，并可以应用加载类


const{
日分
const {
  Button
} = semanticUIReact


class App extends React.Component {


handleClick = (e) => {
  // You can use .add or .toggle according to your requirement.
  e.target.classList.toggle('loading');
}

render() {
  return (
    <div>
       <Button className='btn' onClick={this.handleClick}>Button 1</Button>
       <Button className='btn' onClick={this.handleClick}>Button 2</Button>
       <Button className='btn' onClick={this.handleClick}>Button 3</Button>
    </div>
  )
}
}

ReactDOM.render(<App />, document.getElementById('app'));