我试图在具有两个按钮的同一选项卡上显示不同的html正文。我有两个按钮。我想在两个不同的按钮上显示不同的html,为此,我添加了两个名为xyz
和abc
的函数来呈现html。但是我不知道如何调用此函数。为此,我添加了一个变量标志。而且我没有得到如何在函数xyz
和abc
中使用此标志的信息。就像是abc
按钮应该使用abc
函数调用streamLogs
函数,如果是xyz
按钮应该使用{ {1}}功能。此xyz
和onCloud
函数包含Java的api调用。
onCloud
}
答案 0 :(得分:0)
请找到处理任意数量按钮的最佳方法。我也评论了不需要的方法。
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 = () =>{
// }
}
因此,每次成功获取数据后,都会触发状态显示,该显示将在主体检查getBody()
方法中显示所有视图处理内容。甚至源头看起来也井井有条。