javascript - 调用按钮上的函数单击reactjs

Question

我试图在具有两个按钮的同一选项卡上显示不同的 html 正文。我有两个按钮。我想在两个不同的按钮上显示不同的 html，为此我添加了两个名为 xyz 和 abc 的函数来呈现 html。但我不知道如何调用这个函数。为此，我添加了一个变量标志。我不知道如何将此标志与函数 xyz 和 abc 一起使用。它应该是这样的，如果它是 abc 按钮应该使用 streamLogs 函数调用 abc 函数，如果它是 xyz按钮，它应该使用 onCloud 函数调用 xyz 函数。此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>

    );
}

Answer 1

请找到处理任意数量按钮的最佳方法。我也评论了不需要的方法。

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 = () =>{

    // }
}

因此，每次成功获取数据后，都会触发一个状态显示，其中包含要在正文中显示的内容检查所有 View 处理的 getBody() 方法。甚至来源看起来也组织得很好。