Question

我想使用两个功能中的任何一个来显示图表，具体取决于单击按钮。函数是this.contenidoNuevo（）和this.contenidoNuevo2（）。如果用户单击btn1，则将显示this.contenidoNuevo（）的图表；如果用户单击btn2，则将显示this.contenidoNuevo2（）。另外，渲染时应显示this.conetnidoNuevo（）的图表，因为它是默认图表。感谢您的帮助。

功能：

onClick1 = () => {
        return <>
            {this.contenidoNuevo()}
        </>
}
onClick2 = () => {
        return <>
            {this.contenidoNuevo2()}
        </>
}

render（）：

<div className="row"
     <button id="btn1" onClick={() => {this.onClick1()}}>
        Option 1
     </button>
     <button id="btn2" onClick={() => {this.onClick2()}}>
        Option 2
     </button>    
     {this.contenidoNuevo()}                                
</div>

带有图表的功能contenidoNuevo：

 contenidoNuevo = () => {
        var Obj = this.state.difference_days;
        var data0 = {}
        var data1 = {}

        return <>
            {Obj == 0 &&  

                <Card
                    title="Conversaciones"
                    chartType="line"
                    labels={Object.keys(this.state.concurrency)}

                    datasets={[
                        {
                            label: 'Número de conversaciones actuales',
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: '#F07C30',
                            borderColor: '#FA6A01',
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: '#F07C30',
                            pointBackgroundColor: '#FA6A01',
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: '#F07C30',
                            pointHoverBorderColor: '#FA6A01',
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: Object.values(this.state.concurrency)
                        },
                        {
                            label: 'Número de conversaciones anteriores',
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: '#FC4C0126',
                            borderColor: '#FC4C0126',
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: '#C73C00',
                            pointBackgroundColor: '#FC4C01',
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: '#FC4C01',
                            pointHoverBorderColor: '#C73C00',
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: Object.values(this.state.horario_uso_before)
                        }
                    ]}
                />             
            }
</>
    
    }

带有图表的功能contenidoNuevo2：

contenidoNuevo2 = () => {
        var Obj = this.state.difference_days;

        return <>
            {Obj == 0 && 
                <Card
                    title="Conversaciones"
                    chartType="line"
                    labels={Object.keys(this.state.horario_uso_before)}

                    datasets={[
                        {
                            label: 'Número de conversaciones actuales',
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: '#F07C30',
                            borderColor: '#FA6A01',
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: '#F07C30',
                            pointBackgroundColor: '#FA6A01',
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: '#F07C30',
                            pointHoverBorderColor: '#FA6A01',
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: Object.values(this.state.horario_uso_before)
                        },
                        {
                            label: 'Número de conversaciones anteriores',
                            fill: false,
                            lineTension: 0.1,
                            backgroundColor: '#FC4C0126',
                            borderColor: '#FC4C0126',
                            borderCapStyle: 'butt',
                            borderDash: [],
                            borderDashOffset: 0.0,
                            borderJoinStyle: 'miter',
                            pointBorderColor: '#C73C00',
                            pointBackgroundColor: '#FC4C01',
                            pointBorderWidth: 1,
                            pointHoverRadius: 5,
                            pointHoverBackgroundColor: '#FC4C01',
                            pointHoverBorderColor: '#C73C00',
                            pointHoverBorderWidth: 2,
                            pointRadius: 1,
                            pointHitRadius: 10,
                            data: Object.values(this.state.concurrency) 
                        }
                    ]}
                /> 
                
            }
            
        </>
    
    }

Answer 1

看来您的方法在这里有点不正确。 React组件保持其自己的状态。在您的情况下，此状态是要显示的内容。然后，您的按钮所要做的就是更改此状态的值，这将自动触发重新渲染。以这种方式重做的示例组件看起来像下面的

const contenidoNuevo = "First content"
const contenidoNuevo2 = "Second content"

class App extends React.Component {
  constructor(){
    super();
    this.state = {content: contenidoNuevo}
  }
  
  onClick1 = () => {
        this.setState({content: contenidoNuevo})
  }
  onClick2 = () => {
        this.setState({content: contenidoNuevo2})
  }
  
  render() {
    return (
      <div className="row">
        <button id="btn1" onClick={() => {this.onClick1()}}>
          Option 1
         </button>
      <button id="btn2" onClick={() => {this.onClick2()}}>
        Option 2
     </button>    
     {this.state.content}                                
    </div>
    )
  }
}

如果更适合您的用例，则可以将onClick方法更改为调用函数，而不仅仅是设置值。

Answer 2

考虑使用以下方法代替返回组件：

import React, { Component } from 'react';
class Datas extends Component {
    constructor(props){
        super(props)
        this.state = {
                data: ''
        }
    }
    onClick1 = () => {
        this.setState({ data: <h1>d</h1> });
       
    }
    onClick2 = () => {
        this.setState({ data: <h2>d</h2> });
        
    }
    render() {
        return (
            <div className="row">
                <button id="btn1" onClick={() => { this.onClick1() }}>
                    Option 1
                </button>
                <button id="btn2" onClick={() => { this.onClick2() }}>
                    Option 2
                </button>
                {this.state.data}
            </div >
        )
    }
}
export default Datas;

像这样打印此状态时，它将根据您按下的按钮进行更改

反应-单击按钮时显示图表

2 个答案: