表单对应接口

src/pages/shijiankecheng/box2.js

@@ -5,33 +5,77 @@ export default class Box2 extends Component {
     super();
     this.state = {
       list: [],
+      color: "",
+      color2: -1,
     };
     fetch("https://test-data.educoder.net/api/disciplines.json?source=subject")
       .then((res) => res.json())
       .then((data) => {
-        console.log(data.disciplines);
         this.setState({
           list: data.disciplines,
         });
       });
   }
+  handleclick2(t, i) {
+    this.props.eventbox(t);
+    this.setState({
+      color2: i,
+      color: "",
+    });
+  }
+  handleclick(e, v, t, i, o) {
+    e.stopPropagation();
+    this.props.event(v, t);
+    this.setState({
+      color: i,
+      color2: o,
+    });
+  }
+  handleclick3() {
+    this.props.eventall();
+    this.setState({
+      color2: -1,
+      color: "",
+    });
+  }
   render() {
     return (
       <div className="kc_main_box2">
         <div className="kc_main_box2_contain">
           <ul>
-            <li>全部</li>
-            {this.state.list.map((item) => (
-              <li key={item.id}>
+            <li
+              onClick={() => this.handleclick3()}
+              className={this.state.color2 === -1 ? "kc_active" : ""}
+            >
+              全部
+            </li>
+            {this.state.list.map((item, index) => (
+              <li
+                key={item.id}
+                onClick={() => this.handleclick2(item.id, index)}
+                className={this.state.color2 === index ? "kc_active" : ""}
+              >
                 {item.name}
                 <div className="kc_main_box2_contain_li">
                   <div className="kc_main_box2_contain_li_ul">
-                    {item.sub_disciplines.map((item) => (
+                    {item.sub_disciplines.map((item1, index2) => (
                       <div
                         className="kc_main_box2_contain_li_ul_li"
-                        key={item.id}
+                        style={{
+                          color: this.state.color === item1.id ? "#4cacff" : "",
+                        }}
+                        key={item1.id}
+                        onClick={(e) =>
+                          this.handleclick(
+                            e,
+                            item.id,
+                            item1.id,
+                            item1.id,
+                            index
+                          )
+                        }
                       >
-                        {item.name}
+                        {item1.name}
                       </div>
                     ))}
                   </div>

src/pages/shijiankecheng/box4.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import Box2 from "./box2";
 
 export default class Box4 extends Component {
   constructor() {
@@ -8,6 +9,8 @@ export default class Box4 extends Component {
       current: 1,
       button: "new",
       color: 0,
+      id1: "",
+      id2: "",
     };
     fetch(
       "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
@@ -26,7 +29,11 @@ export default class Box4 extends Component {
   render() {
     return (
       <div>
-        {console.log()}
+        <Box2
+          event={this.hadnleClick_box2}
+          eventall={this.handleClick_box2_all}
+          eventbox={this.hadnleClick_box2_part}
+        ></Box2>
         <div className="kc_main_box3">
           <div
             className={
@@ -78,6 +85,54 @@ export default class Box4 extends Component {
       </div>
     );
   }
+  hadnleClick_box2_part = (disciplines_id) => {
+    this.setState({
+      map: [],
+      id1: disciplines_id,
+      current: 1,
+    });
+    var b = this.state.button;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        1 +
+        "&limit=16&keyword=&discipline_id=" +
+        disciplines_id +
+        "&sub_discipline_id="
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  };
+  hadnleClick_box2 = (disciplines_id, sub_disciplines_id) => {
+    this.setState({
+      map: [],
+      id1: disciplines_id,
+      id2: sub_disciplines_id,
+      current: 1,
+    });
+    var b = this.state.button;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        1 +
+        "&limit=16&keyword=&discipline_id=" +
+        disciplines_id +
+        "&sub_discipline_id=" +
+        sub_disciplines_id
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  };
   handleClick_zuixin = () => {
     this.setState({
       color: 0,
@@ -86,12 +141,17 @@ export default class Box4 extends Component {
     });
     var v = this.state.current;
     var b = "new";
+    var id1 = this.state.id1;
+    var id2 = this.state.id2;
     fetch(
       "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
         b +
         "&page=" +
         v +
-        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+        "&limit=16&keyword=&discipline_id=" +
+        id1 +
+        "&sub_discipline_id=" +
+        id2
     )
       .then((res) => res.json())
       .then((data) => {
@@ -108,12 +168,17 @@ export default class Box4 extends Component {
     });
     var v = this.state.current;
     var b = "";
+    var id1 = this.state.id1;
+    var id2 = this.state.id2;
     fetch(
       "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
         b +
         "&page=" +
         v +
-        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+        "&limit=16&keyword=&discipline_id=" +
+        id1 +
+        "&sub_discipline_id=" +
+        id2
     )
       .then((res) => res.json())
       .then((data) => {
@@ -127,13 +192,19 @@ export default class Box4 extends Component {
       current: this.state.current + 1,
       map: [],
     });
+
     var b = this.state.button;
+    var id1 = this.state.id1;
+    var id2 = this.state.id2;
     fetch(
       "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
         b +
         "&page=" +
         (v + 1) +
-        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+        "&limit=16&keyword=&discipline_id=" +
+        id1 +
+        "&sub_discipline_id=" +
+        id2
     )
       .then((res) => res.json())
       .then((data) => {
@@ -148,12 +219,17 @@ export default class Box4 extends Component {
       map: [],
     });
     var b = this.state.button;
+    var id1 = this.state.id1;
+    var id2 = this.state.id2;
     fetch(
       "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
         b +
         "&page=" +
         (v - 1) +
-        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+        "&limit=16&keyword=&discipline_id=" +
+        id1 +
+        "&sub_discipline_id=" +
+        id2
     )
       .then((res) => res.json())
       .then((data) => {
@@ -162,4 +238,26 @@ export default class Box4 extends Component {
         });
       });
   }
+  handleClick_box2_all = () => {
+    this.setState({
+      map: [],
+      id1: "",
+      id2: "",
+      current: 1,
+    });
+    var b = this.state.button;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        1 +
+        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  };
 }

src/pages/shijiankecheng/shijiankecheng.css

@@ -150,6 +150,10 @@
     background: #ddecf9 !important;
     color: #4cacff !important;
 }
+.kc_active{
+    background: #ddecf9 !important;
+    color: #4cacff !important;
+}
 .kc_main_box2_contain_li{
     display: none;
     position: absolute;

src/pages/shijiankecheng/shijiankecheng.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import "./shijiankecheng.css";
 import Center6 from "../shouye/component/tg_dibu/center6";
-import Box2 from "./box2";
+
 import Box4 from "./box4";
 
 export default class Shijiankecheng extends Component {
@@ -37,7 +37,6 @@ export default class Shijiankecheng extends Component {
             </div>
           </div>
         </div>
-        <Box2></Box2>
 
         <Box4></Box4>
         <Center6></Center6>