Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Changer une partie du state par clic


Sujet :

React

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2017
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2017
    Messages : 24
    Points : 13
    Points
    13
    Par défaut Changer une partie du state par clic
    Bonjour à tous,

    J'aimerais générer un certain nombre de cases, organisées en quadrillage, avec pour chaque case une face cachée, et une face visible.
    Par défaut la case est sur sa face cachée avec pour valeur ?, et j'aimerais que quand on clique dessus, la valeur de la case soit affichée.

    Voici mon code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    import React, { Component } from 'react'
    import './App.css';
    import Case from './Case.js'
     
    const NOMBRE_CASES = 25
     
    class App extends Component {
     
    	// Arrow fx for binding
    	handleCaseClick = () => {
    		this.setState({ revealed: true })
    	}
     
    	genererValeursCase() {
    		let result = [];
    		for(let i=1; i<=NOMBRE_CASES; i++) {
    			result.push({id: i, name: "case" + i});
    		}
    		return result;
    	}
     
    	render() {
     
    		return (
    			<div className="carte">
     
    				<div className = "infosCarte">
    					{
    						this.genererValeursCase().map(({id, name}) => (
    							<Case key = {id} id= {id} valeur = {name} revealed = {false} onClick={this.handleCaseClick}/>
    						))
    					}
    				</div>
     
    			</div>
     
    		)
    	}
    }
     
    export default App;
    et ma classe case :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    import PropTypes from 'prop-types'
    import React, { Component } from 'react'
     
    import './Case.css'
     
    const faceObscure = '?'
     
    class Case extends Component {
     
    	constructor(props) {
    		super(props)
    		this.state = {
    			revealed: false
    		}
     
    	}
     
    	render() {
    		return (
    			<div className="case">
    				<p>
    					{this.props.revealed ? this.props.valeur : faceObscure}
    				</p>
    			</div>
    		)
    	}
    }
     
    Case.propTypes = {
    	id: PropTypes.number.isRequired,
    	valeur: PropTypes.string.isRequired,
    	revealed : PropTypes.bool,
    	cordx: PropTypes.number,
    	cordY: PropTypes.number,
    	onClick: PropTypes.func.isRequired,
    }
     
     
    export default Case
    J'ai testé certaines choses mais rien ne fonctionne, je ne vois pas quoi mettre dans la classe case à cet endroit :
    <div className="case" onClick = ????>

    Est-ce que sauriez m'aider ?

    Le visuel par défaut de ce code donne :

    Nom : visuelParDefaut.png
Affichages : 53
Taille : 5,9 Ko

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    825
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 825
    Points : 1 160
    Points
    1 160
    Par défaut
    salut,

    si dans le onclick de ton div, tu mets
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div onClick={this.props.onClick}>
    tu executeras la methode que tu passes en props (depuis App).
    Par contre vu que tu passes revealed en dur à false, il ne va rien se passer. Bien sur, tu pourrais passer {this.state.revealed} (toujours depuis App), mais dans ce cas, quand tu cliques une case, toutes deviendront visibles.
    Si j'ai bien compris ce que tu veux faire, tu n'as pas besoin de revealed en state sur App. Juste sur case, donc pas besoin non plus de passer le onClick en props.
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2017
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2017
    Messages : 24
    Points : 13
    Points
    13
    Par défaut
    Bonsoir

    je vois, mais du coup concrètement cela donne quoi ?
    car j'ai essayé dans app de faire :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    	render() {
     
    		return (
    			<div className="carte">
     
    				<div className = "infosCarte">
    					{
    						this.genererValeursCase().map(({id, name}) => (
    							<Case key = {id} id= {id} valeur = {name} revealed = {false}/>
    						))
    					}
    				</div>
     
    			</div>
     
    		)
    	}
    et dans case :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    	render() {
    		return (
    			<div className="case" onClick={() => this.setState({revealed: true})}>
    				<p>
    					{this.props.revealed ? this.props.valeur : faceObscure}
    				</p>
    			</div>
    		)
    	}
    Mais cela ne donne rien, rien ne se passe lors du clic.

  4. #4
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    825
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 825
    Points : 1 160
    Points
    1 160
    Par défaut
    Tu as presque bon sauf que this.props.revaled devrait être this.state.revealed dans ton test opérateur ternaire
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

Discussions similaires

  1. Réponses: 5
    Dernier message: 08/06/2011, 22h43
  2. Remplacer une partie de chaine par une variable
    Par JPaul94300 dans le forum VBA Access
    Réponses: 6
    Dernier message: 04/02/2009, 18h52
  3. changer une partie du formulaire de la page
    Par amine003 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 16/10/2008, 17h14
  4. Supprimer une partie de code par l'interpreteur
    Par mr_samurai dans le forum MATLAB
    Réponses: 1
    Dernier message: 08/04/2008, 16h40
  5. [PHP-JS] [URL] Changer une partie d'URL
    Par murrigane dans le forum Langage
    Réponses: 4
    Dernier message: 19/05/2006, 14h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo