大佬教程收集整理的这篇文章主要介绍了单击即可更新所有按钮。反应 Js，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我添加了三个带加载图标的按钮，如果我点击单个按钮，其余两个按钮也会显示加载状态。
我想我在该州做错了什么。
请检查下面我的代码：
import React,{ Component } from 'react'
import { button } from 'react-bootstrap';
export default class LoadingBtn extends Component {
state = {
loading: false
};
clickFunction = () => {
this.setState({
loading: !this.state.loading
})
}
render() {
const { loading } = this.state;
return (
<div>
<button onClick={this.clickFunction}>
{loading && <i classname="fa fa-refresh fa-spin"></i>}
{loading && <span>Joining app...</span>}
{!loading && <span>ALLOW</span>}
</button>
<button onClick={this.clickFunction}>
{loading && <i classname="fa fa-refresh fa-spin"></i>}
{loading && <span>Joining app...</span>}
{!loading && <span>ALLOW</span>}
</button>
<button onClick={this.clickFunction}>
{loading && <i classname="fa fa-refresh fa-spin"></i>}
{loading && <span>Joining app...</span>}
{!loading && <span>ALLOW</span>}
</button>
</div>
)
}
}
您使用的是在点击时更新的单个状态值。所有按钮都链接到相同的状态值，因此当您单击其中任何一个按钮时，它们都会对新状态做出反应。
您需要做的是更改您的函数以采用唯一值来表示点击、id 或名称上的每个按钮。
import React,{ Component } from 'react'
import { Button } from 'react-bootstrap';
export default class LoadingBtn extends Component {
state = {
loading: false
};
clickFunction = (E) => {
this.setState({
loading: e.id
})
}
render() {
const { loading } = this.state.loading;
return (
<div>
<Button
id = "uniqueGeneratedIDForEachButton1"
onClick={(E) => this.clickFunction(E)}>
{loading === "uniqueGeneratedIDForEachButton1" ?
<i className="fa fa-refresh fa-spin"></i><span>Joining app...</span> :
<span>ALLOW</span>}
</Button>
<Button
id = "uniqueGeneratedIDForEachButton2"
onClick={(E) => this.clickFunction(E)}>
{loading === "uniqueGeneratedIDForEachButton2" ?
<i className="fa fa-refresh fa-spin"></i><span>Joining app...</span> :
<span>ALLOW</span>}
</Button>
<Button
id = "uniqueGeneratedIDForEachButton3"
onClick={(E) => this.clickFunction(E)}>
{loading === "uniqueGeneratedIDForEachButton3" ?
<i className="fa fa-refresh fa-spin"></i><span>Joining app...</span> :
<span>ALLOW</span>}
</Button>
</div>
)
}
},
那是因为只有一个加载变量。你必须这样做：
state = {
loadingA: false,loadingB: false,loadingC: false
};
并做相应的逻辑，或者更好：
创建一个具有自己状态的按钮组件，并在主类中使用三次。
以上是大佬教程为你收集整理的单击即可更新所有按钮。反应 Js全部内容，希望文章能够帮你解决单击即可更新所有按钮。反应 Js所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。