Dev Faq
0
votes

Comment puis-je obtenir `valeur` en cliquant sur la balise enfant?

J'ai besoin d'obtenir valeur code> à partir de la balise P code> en cliquant sur le parent div code>.

Comment puis-je faire ça? P > 

import React, {Component} from 'react';

class Industry extends Component {

  state = {
    industry: ["Финансы", "Развлечения"]
  }

  onIndustry(e) {
    console.log(e)
  }

  render() {
    return (
      <div>
        <div className="Profile__otrasl">
          // CLICK HERE
          <div className="Profile__otrasl_block"
           onClick={this.onIndustry.bind(this)}
      >
            <span className="icon-icon-hat">
              <span className="path1"></span><span className="path2"></span><span className="path3"></span><span
              className="path4"></span><span className="path5"></span>
            </span>
        // GET VALUE FROM HERE
        <p>Мода и стиль</p>
      </div>
      // CLICK HERE
      <div className="Profile__otrasl_block"
           onClick={this.onIndustry.bind(this)}>
            <span className="icon-icon-med-bag">
            <span className="path1"></span><span className="path2"></span><span className="path3"></span><span
              className="path4"></span><span className="path5"></span><span className="path6"></span><span
              className="path7"></span><span className="path8"></span><span className="path9"></span>
            </span>
        // GET VALUE FROM HERE
        <p>Медицина</p>
      </div>

        </div>
      </div>
    );
  }
}

export default Industry;

0 commentaires

3 Réponses :

0
votes

Vous pouvez transmettre une référence à la balise P puis onClick Obtenir la valeur à l'intérieur de la balise P de la réf. 

onIndustry(value) {
    console.log(value)
  }

render() {
    return (
      <div>
        <Profile value="Мода и стиль" handleClick={onIndustry} />
        <Profile value="some other value" handleClick={onIndustry} />
        <Profile value="some more different value" handleClick={onIndustry} />
      </div>
    );
  }
}

6 commentaires

Cela fonctionne bien, mais que dois-je faire si j'ai plusieurs éléments?

Les données provenant d'un serveur ou de son codé dur et vous savez-t-il combien d'éléments il y aura?

Son codé dur environ 20 éléments. Dans JQuery, je peux utiliser un sélecteur enfant et obtenir de la valeur, mais dans votre code, j'ai besoin d'écrire 20 fois pour chaque élément, je veux une solution comme dans jQuery

Afin d'obtenir un enfant ref de la DIV, vous devrez ajouter une référence à chaque parent div. Vous ne pouvez pas obtenir Ref to Parent Div dans un gestionnaire de clic et accéder à l'enfant. Et si vous utilisez cette même structure 20 fois différents, vous devriez probablement faire un composant distinct pour cela et cela rendra les choses assez simples.

J'ai également pensé à cette solution, mais il y a un autre problème, comme vous pouvez le constater que la plage de balises est différente partout, puis je devrai envoyer un balisage HTML à chaque élément.

Il existe un concept de renduProp, ce qui est un modèle pour spécifier quoi rendre. Donc, oui, vous devrez envoyer HTML comme un accessoire mais c'est bien et un motif utilisé largement. S'il vous plaît jeter un oeil au docs réactjs.org/docs/render-props.html

0
votes

Idéalement, si vous souhaitez obtenir Vale à partir de

code> Tag et il représente un état pour le composant, vous devez ajouter une statistique et utiliser sa valeur de l'état 

class Industry extends Component {

    state = {
    industry: ["Финансы", "Развлечения"],
    pState : "Мода и стиль"
    }

    onIndustry(e) {
    console.log(e)
    console.log(this.state.pState)
    }

    render() {
    return (
        <div>
        <div className="Profile__otrasl">
            // CLICK HERE
            <div className="Profile__otrasl_block"
                onClick={this.onIndustry.bind(this)}
            >
                <span className="icon-icon-hat">
                    <span className="path1"></span><span className="path2"></span><span className="path3"></span><span
                    className="path4"></span><span className="path5"></span>
                </span>
            // NEED GET VALUE FROM HERE
            <p>{this.state.pState}</p>
            </div>

        </div>
        </div>
    );
    }
}

export default Industry;

1 commentaires

Vous pouvez convertir pstate en tableau ou comme @ceenikC suggéré de faire un composant de réagissage de plus et de passer la valeur

1
votes

Donc, je pense que si vous avez de nombreux éléments, vous devriez l'essayer comme ça. XXX

, puis, vous pouvez utiliser Ceci.SeState ({Liste: [... ]}) pour mettre à jour le composant

6 commentaires

Ce code devrait changer, et je ne peux pas le faire avec votre exemple = '

Si je pouvais transférer le code HTML dans une variable, cela fonctionnerait.

J'ai copié ce code de votre question. Je ne sais pas ce que tu veux changer

Regardez mon code, il y a deux éléments avec différents HTML

C'est possible mais peut-être que je peux faire comme dans JQuery $ ("Li.item-II") .Find ("Li") ou il est impossible?

Désolé ... réagir ne peut pas faire cela comme JQuery. Parce que réagir dépend des données, pas de dom. Si ma réponse est utile, s'il vous plaît upvote, merci :) @ стасрябцев

Articles qui pourrait vous intéresser :

Mon application create-react ne parvient pas à se compiler en raison d'une erreur ESLint
Erreur: Node Sass version 5.0.0 est incompatible avec ^ 4.0.0
La réinitialisation de React-hook-form fonctionne correctement, les champs de saisie ne se vident toujours pas après l'envoi
Changer le format numérique du champ d'entrée dans le mode d'édition de ligne de table d'Antd?