[英]call function on button click reactjs
I am trying to show different html body on same tab having two buttons. 我试图在具有两个按钮的同一选项卡上显示不同的html正文。 I have two buttons.
我有两个按钮。 I want to show different html on two different buttons, for doing this i have added two functions named
xyz
and abc
for rendering html. 我想在两个不同的按钮上显示不同的html,为此,我添加了两个名为
xyz
和abc
函数来呈现html。 But I'm not getting how to call this functions. 但是我不知道如何调用此函数。 For doing this I have added one variable flag.
为此,我添加了一个变量标志。 And I am not getting how to use this flag with function
xyz
and abc
. 而且我没有得到如何使用
xyz
和abc
函数的此标志。 It should be something like if it is abc
button should invoke abc
function with streamLogs
function and if it is xyz
button it should invoke xyz
function with onCloud
function. 如果是
abc
按钮,则应使用streamLogs
函数调用abc
函数;如果是xyz
按钮,则应使用onCloud
函数调用xyz
函数。 This onCloud
and streamLogs
function contains api call of Java. 此
onCloud
和streamLogs
函数包含Java的api调用。
export default class ResourceLog extends React.Component{
constructor(props) {
super(props);
this.state = {
streamData: {},
streamMessage : "",
interval : 5000,
showDatePicker:false,
selectionConfigs : [
{name:"1 Hr",cssClass:"btn btn-info btn-sm",duration:300,startTime:-1,endTime:-1,diff:3600},
{name:"3 Hr",cssClass:"btn btn-info btn-sm",duration:300,startTime:-1,endTime:-1,diff:10800},
],
params : {},
flag: true
}
}
streamLogs = ()=> {
if(this.props.resource.status === "ACTIVE"){
this.setState({"streamMessage":"loading logs.."})
axios.instance.get("api/resources/" + this.props.resource.id+"/log/stream")
.then((resp) => {
this.setState({streamData : resp.data,streamMessage:""})
}).catch(err => {
this.setState({streamMessage:""})
NotificationManager.error("unable to fetch logs")
})
}else{
this.setState({"streamMessage":"Resource is not Active cannot fetch/stream logs..."})
}
}
onCloud = () =>{
let endTime = this.state.params.endTime;
if(endTime === -1){
endTime = new Date().getTime();
}
let startTime = this.state.params.startTime;
if(startTime === -1){
startTime = endTime - this.state.params.diff*1000;
}
let filter = this.state.params.duration;
if(filter === -1){
filter = "";
}
let params = Object.assign({},{startTime:startTime,endTime:endTime,filter:period});
this.setState({"streamMessage":"loading stats.."});
axios.instance.get("api/resources/" + this.props.resource.id+"/cloud/log",{params:params})
.then((resp) => {
this.setState({data : resp.data,streamMessage:""})
}).catch((error) => {
NotificationManager.error(`Failed to fetch stats-`, "Error")
})
}
onChange = () => {
const flag = this.state.flag;
let button;
if (flag) {
button = <abc onClick={this.streamLogs} />;
} else {
button = <xyz onClick={this.onCloud} />;
}
}
render(){
return (
<div>
<button onClick={this.streamLogs}>abc</button>
<button onClick={this.onCloud}>xyz</button>
</div>
)
}
abc = () =>{
return (
<div className="row" style={{"margin":"15px"}}>
<div className="col-md-12">
<h3 style={{display:"inline"}}>Logs
<span style={{marginLeft:"10px", cursor:"pointer"}} title={"Download"}><a target="_blank" href={`api/resources/${this.props.resource.id}/log`}><i className="fa fa-download"></i></a></span>
<span style={{marginLeft:"10px", cursor:"pointer"}} title={"Refresh"}><i onClick={this.streamLogs} className="fa fa-refresh"></i></span>
</h3>
</div>
<div className="clearfix"/>
<br />
<div className="col-md-12">
<div>{this.state.streamMessage}</div>
{mapObject(this.state.streamData,(k,v) => <div><pre>{v.join("\n")}</pre></div>)}
</div>
</div>
);
}
xyz = () =>{
return(
<div className="row" style={{margin:"20px",textAlign:"center"}}>
<div>
<span className={this.state.selectionConfigs[0].cssClass} onClick={() =>this.updateStatsConf(this.state.selectionConfigs[0])}>{this.state.selectionConfigs[0].name}</span>
<span style={{marginLeft:"10px"}} className={this.state.selectionConfigs[1].cssClass} onClick={() =>this.updateStatsConf(this.state.selectionConfigs[1])}>{this.state.selectionConfigs[1].name}</span>
<span style={{marginLeft:"10px"}} className={this.state.selectionConfigs[2].cssClass} onClick={() =>this.updateStatsConf(this.state.selectionConfigs[2])}>{this.state.selectionConfigs[2].name}</span>
</div>
<div className="row" style={{margin:"20px"}}>
<div className="col-md-12">
<div>{this.state.streamMessage}</div>
{mapObject(this.state.streamData,(k,v) => <div><pre>{v.join("\n")}</pre></div>)}
</div>
</div>
</div>
);
}
} }
Please find the best approach to handle for any number of buttons. 请找到处理任意数量按钮的最佳方法。 I commented come unwanted methods too.
我也评论了不需要的方法。
export default class ResourceLog extends React.Component{
constructor(props) {
super(props);
this.state = {
streamData: {},
streamMessage : "",
interval : 5000,
showDatePicker:false,
selectionConfigs : [
{name:"1 Hr",cssClass:"btn btn-info btn-sm",duration:300,startTime:-1,endTime:-1,diff:3600},
{name:"3 Hr",cssClass:"btn btn-info btn-sm",duration:300,startTime:-1,endTime:-1,diff:10800},
],
params : {},
flag: true
}
}
streamLogs = ()=> {
if(this.props.resource.status === "ACTIVE"){
this.setState({"streamMessage":"loading logs.."})
axios.instance.get("api/resources/" + this.props.resource.id+"/log/stream")
.then((resp) => {
this.setState({streamData : resp.data,streamMessage:"", show: "abc"})
}).catch(err => {
this.setState({streamMessage:""})
NotificationManager.error("unable to fetch logs")
})
}else{
this.setState({"streamMessage":"Resource is not Active cannot fetch/stream logs..."})
}
}
onCloud = () =>{
let endTime = this.state.params.endTime;
if(endTime === -1){
endTime = new Date().getTime();
}
let startTime = this.state.params.startTime;
if(startTime === -1){
startTime = endTime - this.state.params.diff*1000;
}
let filter = this.state.params.duration;
if(filter === -1){
filter = "";
}
let params = Object.assign({},{startTime:startTime,endTime:endTime,filter:period});
this.setState({"streamMessage":"loading stats.."});
axios.instance.get("api/resources/" + this.props.resource.id+"/cloud/log",{params:params})
.then((resp) => {
this.setState({data : resp.data,streamMessage:"", show: "abc"})
}).catch((error) => {
NotificationManager.error(`Failed to fetch stats-`, "Error")
})
}
// onChange = () => {
// const flag = this.state.flag;
// let button;
// if (flag) {
// button = <abc onClick={this.streamLogs} />;
// } else {
// button = <xyz onClick={this.onCloud} />;
// }
// }
getBody = () => {
if(this.state.show == "abc"){
return (
<div className="row" style={{"margin":"15px"}}>
<div className="col-md-12">
<h3 style={{display:"inline"}}>Logs
<span style={{marginLeft:"10px", cursor:"pointer"}} title={"Download"}><a target="_blank" href={`api/resources/${this.props.resource.id}/log`}><i className="fa fa-download"></i></a></span>
<span style={{marginLeft:"10px", cursor:"pointer"}} title={"Refresh"}><i onClick={this.streamLogs} className="fa fa-refresh"></i></span>
</h3>
</div>
<div className="clearfix"/>
<br />
<div className="col-md-12">
<div>{this.state.streamMessage}</div>
{mapObject(this.state.streamData,(k,v) => <div><pre>{v.join("\n")}</pre></div>)}
</div>
</div>
);
}else if(this.state.show == "xyz"){
return(
<div className="row" style={{margin:"20px",textAlign:"center"}}>
<div>
<span className={this.state.selectionConfigs[0].cssClass} onClick={() =>this.updateStatsConf(this.state.selectionConfigs[0])}>{this.state.selectionConfigs[0].name}</span>
<span style={{marginLeft:"10px"}} className={this.state.selectionConfigs[1].cssClass} onClick={() =>this.updateStatsConf(this.state.selectionConfigs[1])}>{this.state.selectionConfigs[1].name}</span>
<span style={{marginLeft:"10px"}} className={this.state.selectionConfigs[2].cssClass} onClick={() =>this.updateStatsConf(this.state.selectionConfigs[2])}>{this.state.selectionConfigs[2].name}</span>
</div>
<div className="row" style={{margin:"20px"}}>
<div className="col-md-12">
<div>{this.state.streamMessage}</div>
{mapObject(this.state.streamData,(k,v) => <div><pre>{v.join("\n")}</pre></div>)}
</div>
</div>
</div>
);
}else{
<h1> please click a BUtton </h1>
}
}
render(){
return (
<div>
<button onClick={this.streamLogs}>abc</button>
<button onClick={this.onCloud}>xyz</button>
{this.getBody()}
</div>
)
}
// abc = () =>{
// }
// xyz = () =>{
// }
}
So every time after you fetch the data successfully you trigger a state show which has what to show in the body check getBody()
method for all the view handling. 因此,每次成功获取数据后,您都会触发状态显示,该显示将在正文中显示所有检查处理的
getBody()
方法。 even the source looks well organised. 甚至源看起来井井有条。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.