Bonjour à tous,

Je démarre totalement avec ReactJs (et globalement avec javascript tout court), et j'en appelle à votre aide !
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 :

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 :

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 :

Bonjour,

Tu commences avec une class App qui génère ton tableau/cadrillage.

Ensuite dans ta class Case tu doit gérer l'état de ta case, logique ?

Chaque case a son propre etat, de ce fait ta logique de mettre une fonction pour changer l'etat de App est totalement incorrecte.

Tu as bien gérer le state : {revealed: false}

Donc maintenant quand tu clique sur la case tu doit changer son etat , et passer revealed en true.

<div className="case" 
 onClick={() => this.setState({revealed: true})>
     <p>
         this.props.revealed ? this.props.valeur : faceObscure}
     </p>
</div>

-
Edité par ElamineAllaouidine 16 septembre 2019 à 11:55:49

Bonsoir

Merci pour cette première explication !

J'ai changé mais cela ne fonctionne toujours pas ><

Voici ce que ça donne pour case :

class Case extends Component {
	
	constructor(props) {
		super(props)
		this.state = {
			revealed: false
		}
		
	}

	render() {
		return (
			<div className="case" onClick={() => this.setState({revealed: true})}>
				<p>
					{this.props.revealed ? this.props.valeur : faceObscure}
				</p>
			</div>
		)
	}
}

et voici pour le app :

class App extends Component {


	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}/>
						))
					}
				</div>
				
			</div>

		)
	}
}

j'ai beau cliquer sur un div, rien ne se passe.

En examinant le code htlm, je vois qu'il y a bien la classe case, mais le div n'a pas de onClick visible.

VincHawthorne a écrit:

Bonsoir

Merci pour cette première explication !

J'ai changé mais cela ne fonctionne toujours pas ><

Voici ce que ça donne pour case :

class Case extends Component {
	
	constructor(props) {
		super(props)
		this.state = {
			revealed: false
		}
		
	}

	render() {
		return (
			<div className="case" onClick={() => this.setState({revealed: true})}>
				<p>
					{this.props.revealed ? this.props.valeur : faceObscure}
				</p>
			</div>
		)
	}
}

et voici pour le app :

class App extends Component {


	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}/>
						))
					}
				</div>
				
			</div>

		)
	}
}

j'ai beau cliquer sur un div, rien ne se passe.

En examinant le code htlm, je vois qu'il y a bien la classe case, mais le div n'a pas de onClick visible.

Les propriétés de react ne sont pas visible dans le code HTML/DOM.

Donc ce qui est pas bon la dedans seulement de visu serait :

• Pourquoi tu utilise "this.props.revealed" alors que tu devrais utiliser l’état de la case ?

Regarde de ce côté.

Bonne chance.

Hum oui c'est en effet une très bonne question

Reliquat du code précédent où je faisais tout en dur ... évident et je ne le voyais pas !

Tout marche bien avec un this.state.revealed !

Merci beaucoup !!!!