El botón Reaccionar no se procesa más de una vez

Question

Tengo un botón para representar nuevos componentes (en realidad gráficos, he simplificado el ejemplo para mostrar solo texto) que agrega un texto a la página la primera vez que se hace clic, pero no agregará ningún objeto de texto nuevo a la página con más clics

He probado para ver si la función realmente se está ejecutando cuando la presiono varias veces al hacer que agregue elementos a una matriz, lo que hace, entonces, ¿por qué no representa nuevos objetos de texto en la página cuando se hace clic varias veces? ?

Podría estar perdiendo algo fundamental y agradecería cualquier explicación.

import React from 'react';
import './App.css';

class NewChart extends React.Component {
  render() {
    return (
      <div>Text</div>
    );
  }
}

class Button extends React.Component {
  render() {
    return (
      <button {...this.props}>
        Add chart
      </button>
    );
  }
}

class ChartApp extends React.Component {
  constructor() {
    super();
    this.state = {
        clicked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
        clicked: true
    });
  }

  render() {
    return (
      <div>
        <Button onClick={this.handleClick} />
        {this.state.clicked ? <NewChart />: null}
      </div>
    );
  }
};

export default React.createClass({
  render: function () {
    return (
      <div>
        <ChartApp>
        </ChartApp>
      </div>
    )
  }
});

javascript reactjs react-chartjs

0

Henrik Halvorsen 20 mar. 2017 a las 22:09

Answer 1

Actualmente está utilizando un botón que establece un indicador único en verdadero y luego representa un componente cuando ese indicador es verdadero. Si desea renderizar múltiples componentes, necesita algún aspecto de su estado que se relacione con la cantidad de componentes que desea renderizar, y luego renderizar en función de eso. Por ejemplo, como mencionas, si usas una matriz o quizás una variable de contador, podrías usar .map o incluso un bucle for para representar múltiples componentes. En este momento solo le está pidiendo a React que renderice condicionalmente un solo componente NewChart.

0

John 20 mar. 2017 a las 19:13

Answer 2

El problema es que no está agregando nuevos elementos, sino simplemente renderizando o no dependiendo del valor de checked. El truco es tener una matriz de elementos para renderizar y agregar un elemento más cada vez que haga clic en el botón.

Aquí tienes un ejemplo de trabajo:

import React from 'react';
import './App.css';

class NewChart extends React.Component {
  render() {
    return (
      <div key={this.props.key}>Text</div>
    );
  }
}

class Button extends React.Component {
  render() {
    return (
      <button {...this.props}>
        Add chart
          </button>
    );
  }
}

class ChartApp extends React.Component {
  constructor() {
    super();
    this.state = {
      elements: []
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    var newArray = this.state.elements.slice();
    newArray.push(<NewChart key={this.state.elements.length + 1}/>);
    this.setState({
      elements: newArray
    });
  }

  render() {
    return (
      <div>
        <Button onClick={this.handleClick} />
        {this.state.elements.map((elem) => {
          return elem;
        })}
      </div>
    );
  }
}

class App extends React.Component {
  render () {
    return (
      <div>
        <ChartApp />
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

0

Facundo La Rocca 20 mar. 2017 a las 19:37

El botón Reaccionar no se procesa más de una vez

2 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript