1
votes

Comment passer un objet avec onClick React?

J'ai un objet dans un fichier externe et je souhaite passer l ' url dans le bouton onClick mais je ne sais pas transmettre la valeur.

Objet :

class Projects extends Component {
  render() {
    return (
      <div>
        {ProjectLists.map((project, i) =>

        <section className='section'>
          <div className='row'>
            <div className='col-sm'>
              <div className='content-left'>
                <p key={project.id + i}>
                  {project.iconImage}
                </p>
              </div>
            </div>
            <div className='col-sm-8'>
              <div className='content-right text-left'>
                <h1>{project.name}</h1>
                <p>{project.description}</p>
                <p>Technologies: {project.technologies}</p>
                <button type='submit' onClick=() => </button>>View live</button>
              </div>
            </div>
          </div>
        </section>
        )}
      </div>
    )
  }
}

Comment passer ProjectLists.map ((project, i) => href dans la carte () dans

const ProjectLists = [

    {
        id: "4",
        iconImage: "",
        name: "Simple",
        description: "Simple is a corporate responsive template and the absolutely clean & modern template theme for your business. The theme was built by Foundation Framework and take advantages of it features: grid system, typography, buttons, form, UI element, section and more.",
        technologies: "HTML, CSS, JavaScript",
        href: "http://striped-dolls.surge.sh"
    }
]

export default ProjectLists;

Merci pour votre aide!

reactjs object arrays

2 commentaires

Vous souhaitez rediriger vers le lien ou utiliser le bouton à cet effet.

vous pouvez utiliser à partir de ce lien: stackoverflow.com / questions / 43804032 /…

3 Réponses :

0
votes

Vous pouvez utiliser la balise "a" à cette fin.

onClick={() => { window.location.href = project.href }}

Si vous souhaitez utiliser onClick dans votre bouton, vous pouvez essayer ceci.

<a href={project.href}></a>

1 commentaires

Cette solution fonctionne mais j'aimerais savoir comment passer {project.href} dans onClick () . Pourriez-vous donner un exemple s'il vous plaît?

0
votes

Vous pouvez transmettre des données supplémentaires dans votre carte en utilisant les fonctions fléchées:

{ProjectLists.map(project =>
  <button onClick={onProjectClick(project)}>View live</button>
}

// e.g.
onProjectClick = project => event => {
  console.log(project.description);
  navigateTo(project.href);
}

J'ai remarqué que votre bouton a type = "soumettre" donc plus le bon événement à gérer est onSubmit sur l'élément de formulaire cependant car cela gère l'appui sur la touche Retour par exemple (ce n'est pas essentiel cependant).

6 commentaires

Merci mais je veux le passer dans le

0
votes

<button onClick={()=>this.setRedirect(project.href)}>View live</button>

0 commentaires