bonsoir
j ai 2 boutons checkbox a1 et a2 et deux boutons b1 et b2
le a1 et b1 sur la même page nommée chekboxessai1 .jsx (même components) et b2 sur une autre page .jsx nommée chekboxessai2
j ai un fichier .jsx container qui contient les deux page nommée chekboxessai3
j ai crée un reducer (chekboxessai4) en utilisant redux le but est comme suit:
cocher a1 ==> a2 désactive et b1 s'active et b2 se désactive
cocher a2==> a1 désactive et b1 s'active et b2 s'active
si je décoche a1 a2 s'active et b1 et b2 retourne dans leur état initial
des suggestion pour résoudre ce problème svp;
nb: j ai posté cet exemple afin de comprendre le fonctionnement ; et ce n'est Pas le travail demander.
merci pour votre aide.
voici les code:
chekboxessai1
chekboxessai2:
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
78
79
80
81 import React, { Component } from "react"; import { Button, Checkbox } from "antd"; import { EditOutlined } from "@ant-design/icons"; import { connect } from "react-redux"; class Chek1 extends Component { //crer consturoctor //pour changement au niveau checkbox et enregistrer render() { { /* ///////////////////////numéro 1*/ } function onChange(value) { console.log("changed", value); } // pour checkbox console.log(this.props); var dispatch = this.props.dispatch; function onChange(e) { console.log(`checked = ${e.target.checked}`); } function onChange(value) { console.log(`selected ${value}`); } function onSearch(val) { console.log("search:", val); } return ( <div style={{ display: "flex", flexDirection: "column", backgroundColor: "aquamarine", height: "83vh", width: "20%", }} > Information 1 <br /> {/* ////////////////////////////////////////////////////check box choix de 1 */} <Checkbox onChange={(e) => { dispatch({ type: "is selected a1", step: 1, }); }} > {" "} a1{" "} </Checkbox> <Checkbox onChange={onChange}>a2</Checkbox> <Button type="primary" icon={<EditOutlined />} disabled={!this.state} //pour activer ou désavtiver le bouton enregistrer > B1 </Button>{" "} </div> ); } } //apprendre par couer; pour acceder a redux const mapStateToProps = (state) => { console.log("etat du checkbox", state); return { //alpha: "one" etatcheckboxa1: state.checka1, }; }; export default connect(mapStateToProps, null)(Chek1);
chekboxessai3:
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 import React, { Component } from "react"; import { Button, Checkbox } from "antd"; import { DeleteOutlined } from "@ant-design/icons"; //import moment from "moment"; //import { connect } from "react-redux"; class Chek2 extends Component { //crer consturoctor constructor(props) { super(props); this.state = { checked: "", }; } //pour changement au niveau checkbox et enregistrer choixchange(e) { this.setState({ input: e.target.checked }); } render() { function onChange(value) { console.log("changed", value); } function onChange(e) { console.log(`checked = ${e.target.checked}`); } function onChange(value) { console.log(`selected ${value}`); } function onSearch(val) { console.log("search:", val); } return ( <div style={{ display: "flex", flexDirection: "column", backgroundColor: "blanchedalmond", height: "83vh", width: "20%", }} > Information2 <br /> <Button type="primary" icon={<DeleteOutlined />}> B2 </Button>{" "} </div> ); } } export default Chek2;
pour redux :
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 //import { Row } from "antd"; import React, { Component } from "react"; import Chek1 from "../components/chekboxessai1"; import Chek2 from "../components/chekboxessai2"; //import { connect } from "react-redux"; class Pagemenu1 extends Component { render() { return ( <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", // backgroundColor: "blue", height: "100vh", }} > hello <br /> <Chek1 /> <Chek2 /> </div> ); } } export default Pagemenu1;
chekboxessai4
et pour le APP JS:
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 import { createStore, combineReducers } from "redux"; //declaration reducers const checkReducer = (state = 0, action) => { console.log("checkbox a1 is selected", action, state); if (action.type == "is selected a1") { console.log("checkbox a11 is selected"); return (state = 1); console.log(state); } else if (action.type == "not selected") { console.log("checkbox a1 is not selected"); return state; // console.log(state); } return state; }; const userReducer = (state = "", action) => { console.log("Reducer 1", action, state); if (action.type == "set_username") { return action.username; // console.log(state); } return state; }; let reducers = combineReducers({ //utilisateur: userReducer, checka1: checkReducer, }); //cree stor let store = createStore(reducers); export { store };
dans l'attente de votre aide, agréable soirée
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 import React, { Component } from "react"; import "antd/dist/antd.css"; import "./App.css"; import { Provider } from "react-redux"; import { store } from "./redux/chekboxessai4"; //import Chek1 from "../components/chekboxessai1"; //import Chek2 from "../components/chekboxessai2"; import Pagemenu1 from "./container/chekboxessai3"; class App extends Component { render() { return ( <Provider store={store}> <div className="App"> <Pagemenu1 /> </div> </Provider> ); } } export default App;
Partager