Fonctionnement checkbox et redux

**automa** · 27/01/2022, 18h00

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

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);

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
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;

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
//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;

pour redux :
chekboxessai4

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 };

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
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;

dans l'attente de votre aide, agréable soirée

**automa** · 29/01/2022, 09h49

bonjour
suite plusieurs tentative et aide d'un ami
voici le résultat

chekboxessai1

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
import React, { Component } from "react";
import { Button, Checkbox } from "antd";
import { EditOutlined, ThunderboltFilled } 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*/
    }
        // pour checkbox
    console.log(this.props);
    var dispatch = this.props.dispatch;
    function onChange(e) {
      console.log(`checked = ${e.target.checked}`);
    }
    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) => {
            console.log(e.target.checked)
            dispatch({
              type: "is selected a1",
              step: e.target.checked,
            });
          }}
        >
          {" "}
          a1{" "}
        </Checkbox >
        <Checkbox onChange={onChange} disabled={this.props.etatcheckboxa1}>a2</Checkbox>
        <Button
          //style={{etatcheckboxa1==1!}}
          type="primary"
          icon={<EditOutlined />}
          disabled={!this.props.etatcheckboxa1}
 
          //pour activer ou désavtiver le bouton enregistrer
        >
          B1
        </Button>{" "}
      </div>
    );
  }
}
 
 
const mapStateToProps = (state) => {
  console.log("etat du checkbox", state);
  return {
    //alpha: "one"
    etatcheckboxa1: state.checka1,
  };
};
export default connect(mapStateToProps, null)(Chek1);

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
import React, { Component } from "react";
import { Button, Checkbox } from "antd";
import { DeleteOutlined } from "@ant-design/icons";
import { connect } from "react-redux";
//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() {
   console.log("W3",this.props)
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          backgroundColor: "blanchedalmond",
          height: "83vh",
          width: "20%",
        }}      >
        Information2 <br />
        <Button type="primary" icon={<DeleteOutlined />} disabled={this.props.etatcheckboxa1}>
          B2
        </Button>{" "}
      </div>
    );  }      }
const mapStateToProps = (state) => {
  console.log("etat du checkbox", state);
  return {
    //alpha: "one"
    etatcheckboxa1: state.checka1,
  };};
export default connect(mapStateToProps, null)(Chek2)

pour container 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
//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;

pour redux chekboxessai4

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
import { createStore, combineReducers } from "redux";
//declaration reducers
const checkReducer = (state = false, action) => {
  console.log("checkbox a1 is selected", action, state);
  if (action.type == "is selected a1") {
    console.log("checkbox a11 is selected");
 
    return state= action.step;
 
  } 
  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 };

pour 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
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;

merci a vous tous

Fonctionnement checkbox et redux

React

Vue hybride

Discussions similaires

Partager

Partager