Discussion :

[soufianet]

j'ai ce Collapsible et quand je clique sur question ca ouvre toutes les reponses, je veux que ca ouvre juste celle sur la quelle je clique

voici une image pour voir le probleme :


et le code source :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React, { Component } from "react";
import Collapsible from 'react-native-collapsible';
import { Text, View, StyleSheet, Button } from 'react-native';

const  questions= [
  {
     id: 0,
     name: 'question1',
  },
  {
     id: 1,
     name: 'question2',
  },
  {
     id: 2,
     name: 'question3',
  },
  {
     id: 3,
     name: 'question4',
  }
]


export default class AccordionHeaderContentStyleExample extends Component {

  
  state = {
    outerCollapse: true,
    innerCollapse: true,
  };

  render() {
   
    return (

        <View style={styles.container}>
    
            <Button
              title={this.props.data.name}      
              onPress={() =>
              this.setState({ outerCollapse: !this.state.outerCollapse })}
            />
            <Collapsible collapsed={this.state.outerCollapse}>
                        
                 {questions.map(e=>
                  <View>
                    <Button 
                       title={e.name}
                       color="#42f4eb" 
                       onPress={() => this.setState({ innerCollapse: !this.state.innerCollapse })}/>        
                     <Collapsible collapsed={this.state.innerCollapse}>
                           <Text style={styles.center}>Reponse</Text>
                      </Collapsible>
                   </View>
                     )} 
                              
            </Collapsible>

      </View>
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 0,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  center: {
    textAlign: 'center'
  },
 
});

[Listed]

Bonjour,

Ce qui est normal puisque vos Collapsibles dépendent tous du même state.

Vous devez gérer l'état de chaque "Collapsible" .


Source : https://facebook.github.io/react-nat.../flatlist.html

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
export default class AccordionHeaderContentStyleExample extends Component {

...
 state = {selected: (new Map(): Map<string, boolean>)};
...

_onPress = (id : string) => {
    this.setState((state) => {
      // copy the map rather than modifying state.
      const selected = new Map(state.selected);
      selected.set(id, !selected.get(id)); // toggle
      return {selected};
    });
}
...
_renderItem = ({item}) => (
    <MyListItem
      id={item.id}
      onPressItem={this._onPressItem}
      selected={!!this.state.selected.get(item.id)}
      title={item.title}
   />
...
}

Bonne continuation