Discussion :

[Hawthorne]

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 :

[gwyohm]

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.

[Hawthorne]

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.

[gwyohm]

Tu as presque bon sauf que this.props.revaled devrait être this.state.revealed dans ton test opérateur ternaire