web-dev-qa-db-fra.com

React.js: Comment ajouter un composant sur un clic?

Je suis nouveau sur React et je suis perplexe sur quelque chose de fondamental.

Je dois ajouter un composant au DOM après son rendu, lors d'un événement click.

Ma tentative initiale est la suivante et cela ne fonctionne pas. Mais c'est la meilleure chose à laquelle j'ai pensé d'essayer. (Veuillez nous excuser par avance pour avoir mélangé jQuery avec React.)

    ParentComponent = class ParentComponent extends React.Component {
      constructor () {
        this.addChild = this.addChild.bind(this);
      }

      addChild (event) {
        event.preventDefault();
        $("#children-pane").append(<ChildComponent/>);
      }

      render () {
        return (
          <div className="card calculator">
            <p><a href="#" onClick={this.addChild}>Add Another Child Component</a></p>
            <div id="children-pane">
              <ChildComponent/>
            </div>
          </div>
        );
      }
    };

J'espère que ce que je dois faire est clair et j'espère que vous pourrez m'aider à trouver une solution appropriée.

domreactjs
52
jayqui

Comme @Alex McMillan l'a mentionné, utilisez state pour dicter ce qui doit être rendu dans le domaine.

Dans l'exemple ci-dessous, j'ai un champ de saisie et je souhaite en ajouter un deuxième lorsque l'utilisateur clique sur le bouton. Le gestionnaire d'événements onClick appelle handleAddSecondInput (), qui modifie inputLinkClicked en true. J'utilise un opérateur ternaire pour vérifier l'état de vérité, ce qui rend le deuxième champ de saisie

class HealthConditions extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      inputLinkClicked: false
    }
  }

  handleAddSecondInput() {
    this.setState({
      inputLinkClicked: true
    })
  }


  render() {
    return(
      <main id="wrapper" className="" data-reset-cookie-tab>
        <div id="content" role="main">
          <div className="inner-block">

            <H1Heading title="Tell us about any disabilities, illnesses or ongoing conditions"/>

            <InputField label="Name of condition"
              InputType="text"
              InputId="id-condition"
              InputName="condition"
            />

            {
              this.state.inputLinkClicked?

              <InputField label=""
                InputType="text"
                InputId="id-condition2"
                InputName="condition2"
              />

              :

              <div></div>
            }

            <button
              type="button"
              className="make-button-link"
              data-add-button=""
              href="#"
              onClick={this.handleAddSecondInput}
            >
              Add a condition
            </button>

            <FormButton buttonLabel="Next"
              handleSubmit={this.handleSubmit}
              linkto={
                this.state.illnessOrDisability === 'true' ?
                "/404"
                :
                "/add-your-details"
              }
            />

            <BackLink backLink="/add-your-details" />

          </div>
         </div>
      </main>
    );
  }
}
11
Homam Bahrani

N'utilisez pas jQuery pour manipuler le DOM lorsque vous utilisez React. Les composants React doivent afficher ne représentation à quoi ils devraient ressembler dans un certain état; ce que DOM qui traduit est pris en charge par React lui-même.

Ce que vous voulez faire est de stocker "l'état qui détermine ce qui est rendu" en haut de la chaîne et de le transmettre. Si vous restituez n enfants, cet état doit appartenir à tout ce qui contient votre composant. par exemple:

class AppComponent extends React.Component {
  state = {
    numChildren: 0
  }

  render () {
    const children = [];

    for (var i = 0; i < this.state.numChildren; i += 1) {
      children.Push(<ChildComponent key={i} number={i} />);
    };

    return (
      <ParentComponent addChild={this.onAddChild}>
        {children}
      </ParentComponent>
    );
  }

  onAddChild = () => {
    this.setState({
      numChildren: this.state.numChildren + 1
    });
  }
}

const ParentComponent = props => (
  <div className="card calculator">
    <p><a href="#" onClick={props.addChild}>Add Another Child Component</a></p>
    <div id="children-pane">
      {props.children}
    </div>
  </div>
);

const ChildComponent = props => <div>{"I am child " + props.number}</div>;
82
Alex McMillan