Comment transmettre la valeur du composant enfant de réaction au composant parent ?-js tutoriel-php.cn

Comment transmettre la valeur du composant enfant de réaction au composant parent ?

青灯夜游

Libérer： 2020-11-30 15:56:16

original

13858 Les gens l'ont consulté

La méthode permettant au sous-composant de réaction de transmettre la valeur au composant parent : définissez la valeur initiale de l'état et de la fonction pour traiter l'état dans le composant parent, et transmettez le nom de la fonction au sous-composant dans le forme de valeur d'attribut props.Le composant enfant appelle la fonction du composant parent, provoquant ainsi des changements d'état, afin d'afficher les modifications du composant enfant dans le composant parent.

Comment transmettre la valeur du composant enfant de réaction au composant parent ?

L'environnement d'exploitation de ce tutoriel : système windows7, version React16 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandations associées : "Tutoriel vidéo React"

Le composant enfant doit contrôler son propre état, puis indiquer au composant parent son propre état et appeler le parent composant via des accessoires. Une fonction qui contrôle l’état et affiche les changements d’état des composants enfants dans le composant parent.

/***实现在输入框输入邮箱时，在p中即时显示输入内容***/


<body>
  <p id="test"></p>
</body>

//子组件
var Child = React.createClass({
  render: function(){
    return (
      <p>
        邮箱：<input onChange={this.props.handleEmail}/>
      </p>
    )
  }
});

//父组件
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: &#39;&#39;
    }
  },
  handleEmail: function(event){
    this.setState({email: event.target.value});
  },
  render: function(){
    return (
      <p>
        <p>邮箱：{this.state.email}</p>
        <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
      </p>
    )
  }
});
React.render(
 <Parent />,
 document.getElementById(&#39;test&#39;)
);

Copier après la connexion

Principe :

s'appuie sur des accessoires pour transmettre les références d'événements et les implémente via des rappels. Cette implémentation n'est pas particulièrement bonne, mais sans C'est un moyen simple. pour le mettre en œuvre sans aucun outil.

Analyse :

Dans React, le composant ne se mettra à jour que lorsque l'état change. Définissez la valeur initiale de l'état et de la fonction pour traiter l'état dans le composant parent, et transmettez le nom de la fonction au composant enfant sous la forme d'une valeur d'attribut props. Le composant enfant appelle la fonction du composant parent, provoquant ainsi des changements d'état. pour atteindre l'objectif de changer l'état du composant parent. Le composant affiche les modifications apportées par le sous-composant.

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!