1
votes

Problèmes de changement d'état à l'aide de boutons avec React.js

J'essaye de changer un état dans mon App.js en utilisant un écouteur onClick qui prend la valeur d'un élément DOM pour saisir une valeur. Cela me permettra de changer ce que jsx est rendu dans le DOM. Ceci est similaire au changement de page sur un site Web, cependant, je veux que tout soit fait dans un seul domaine.

Jusqu'à présent, cependant, j'ai obtenu une valeur non définie pour l'élément DOM.

Je crois que le problème peut provenir de la façon dont j'ai écrit ma fonction ou de la façon dont je l'ai passée dans mon composant Navbar.

State

import React from 'react';

function Navbar(props) {

    return (
        <div className='row'>
            <h5 className='col s4 waves-effect center-align' name={props.link1} value={props.link1} onClick={(event) => props.changePage(event)}>{props.link1}</h5>
            <h5 className='col s4 waves-effect center-align' name={props.link2} value={props.link2} onClick={props.changePage}>{props.link2}</h5>
            <h5 className='col s4 waves-effect center-align' name={props.link3} value={props.link3} onClick={props.changePage}>{props.link3}</h5>
        </div>
    )
}

export default Navbar

Changer la fonction de page

<Navbar changePage={this.changePage} value1={this.state.page} link1={"About"} link2={"Portfolio"} link3={"Contact"} />

Comment il est transmis au composant Nav

 changePage = event => {
    const { name, value } = event.target;
    this.setState({
      page: value
    })
  }

Le composant Nav

 state = {
    page: 'Home'
  }

Lorsque je clique sur le premier dans le composant de navigation, je m'attends à ce qu'en utilisant la fonction que je lui ai transmise depuis le composant parent, il récupère la valeur et change l'état en valeur. Au lieu de cela, j'obtiens une valeur indéfinie.

reactjs

1 commentaires

la valeur d'un élément h5 serait innerText je pense. Mais au lieu de cela, vous devez simplement transmettre ce que vous voulez dans le rappel lui-même. de cette façon, c'est plus explicite. onClick = {(e) => props.changePage (e, link1)} de cette façon, vous donnez simplement la valeur, un bogue potentiel dans votre code pourrait être si quelque chose modifie le innerText de l'élément, votre le code ne fonctionnerait pas. Mieux vaut le garder explicite / plus directif :)

3 Réponses :

0
votes

De https://www.w3schools.com/tags/att_value.asp

onClick={() => props.changePage(props.link1)}

Pour les balises , je crois que la valeur n'est pas un attribut applicable, donc vous obtenez "indéfini" https://www.w3schools.com/tags/tag_hn.asp

Ce que vous pouvez faire est de mettre à jour votre méthode de manière à accepter une valeur

 changePage = (value) => {
    this.setState({
      page: value
    })
  }

et pour vos balises , vous pouvez mettre à jour méthode onClick de manière à ce que vous lui transmettiez la valeur directement

For <button>, <input> and <option> elements, the value attribute specifies the initial value of the element.

For <li> elements, the value attribute sets the value of the list item (for ordered lists). The next list items will increment from that value.

For <meter> elements, the value attribute specifies the current value of the gauge.

For <progress> elements, the value attribute specifies how much of the task has been completed.

For <param> elements, the value attribute specifies the value of the parameter.

0 commentaires

0
votes

Comme je le disais dans les commentaires, vous essayez d'accéder à un attribut qui n'existe pas sur cet élément, pouvez-vous changer l'élément en un autre? oui, est-ce la meilleure façon de gérer l'obtention de la nouvelle page? non probablement pas. Je nettoierais un peu le code. Vous devriez être plus directif sur son fonctionnement, transmettre des valeurs explicites à la mise à jour, cela durcira votre code et sera moins sujet aux erreurs.

De plus, j'ai transformé les liens en un tableau afin que tout ce que vous ayez à faire maintenant pour ajouter un le nouveau lien consiste simplement à ajouter une chaîne de plus dans le tableau links et le reste se produira pour vous :)

<Navbar 
  onChange={this.changePage}
  activeLink={this.state.page}
  links={["About", "Portfolio", "Contact"]}
/>

puis votre gestionnaire de page de modification p>

changePage = (e, page) => {
    e.preventDefault()
    this.setState({ page })
}

La façon d'utiliser le composant NavBar serait

function Navbar({onClick, links, activeLink}) {
    return (
        <div className='row'>
            { links.map( link => (
              <a href={`/${link}`}
                 onClick={(e) => onChange(e, link)}
              >
                <h5 className={`col s4 waves-effect center-align${activeLink === link ? ' active' : ''}`}
                    name={link}
                >
                  {link}
                </h5>
              </a>
            )}
        </div>
    )
}

0 commentaires

0
votes

Cela peut être résolu en utilisant un bouton pour envelopper vos en-têtes et en exécutant la fonction au lieu de la renvoyer:

<button
  name={props.link1}
  value={props.link1}
  onClick={(event) => { props.changePage(event); }}
>
  <h5 className='col s4 waves-effect center-align'>{props.link1}</h5>
</button>

0 commentaires