按钮上一页和下一页的是否可按的优化

src/pages/shijiankecheng/box4.js

@@ -28,7 +28,7 @@ export default class Box4 extends Component {
   }
   render() {
     return (
-      <div>
+      <div style={{ background: "#f8f8f8" }}>
         <Box2
           event={this.hadnleClick_box2}
           eventall={this.handleClick_box2_all}
@@ -70,14 +70,29 @@ export default class Box4 extends Component {
             </div>
           ))}
         </div>
-
+        {
+          (console.log("active"),
+          this.state.map.length === 0 ? console.log("y") : "")
+        }
         <div className="kc_main_box5">
-          <button onClick={() => this.handleClick_shang(this.state.current)}>
+          <button
+            onClick={() => this.handleClick_shang(this.state.current)}
+            disabled={this.state.current === 1 ? "disabled" : ""}
+            className={
+              this.state.current === 1 ? "button_color_no" : "button_color_yes"
+            }
+          >
             上一页
           </button>
           <button
             style={{ marginLeft: "8px" }}
             onClick={() => this.handleClick_xia(this.state.current)}
+            disabled={this.state.map.length < 16 ? "disabled" : ""}
+            className={
+              this.state.map.length < 16
+                ? "button_color_no"
+                : "button_color_yes"
+            }
           >
             下一页
           </button>

src/pages/shijiankecheng/shijiankecheng.css

@@ -276,4 +276,14 @@
     border: 1px;
     padding: 3px 11px;
     font-size: 14px;
+}
+.button_color_no{
+    color: rgba(0, 0, 0, 0.25);
+    background: #f5f5f5;
+    border-color: #d9d9d9;
+}
+.button_color_yes{
+    color: rgba(0, 0, 0, 0.85);
+    background: #fff;
+    border-color: #d9d9d9;
 }