组件的使用

2 years ago · 2773373c6b
parent 1fcd61027c
commit 2773373c6b
6 changed files with 132 additions and 45 deletions
--- a/box/src/components/app.jsx
+++ b/box/src/components/app.jsx
@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import NavBar from './navbar';
+import Boxes from './boxes';
+
+class App extends Component {
+
+    render() { 
+        return (
+            <React.Fragment>
+                <NavBar></NavBar>
+                <div className="container">
+                    <Boxes></Boxes>
+                </div>
+            </React.Fragment>
+        );
+    }
+}
+ 
+export default App;
--- a/box/src/components/box.jsx
+++ b/box/src/components/box.jsx
@ -2,56 +2,36 @@ import React, { Component } from 'react';


 class Box extends Component {
-    state = { 
-        x: 1,
-        width: 500,
-        height: 500,
-     }; 
-
-
-
+    
    btn_1_style = {
-        margin: "20px 20px 0px 150px",
+        margin: "10px 20px 0px 0px",
    }

    btn_2_style = {
-        margin: "20px 0px 0px 0px",
+        margin: "10px 0px 0px 0px",
    }

-
-    handleClickLeft = (step) => {
-        this.setState({
-            x: this.state.x - step,
-            width: this.state.width - 50,
-            height: this.state.height - 50,
-        });
-
-        console.log(step,this.state.width,this.state.height);
+    btn_3_style = {
+        margin: "10px 0px 0px 20px",
    }

-    handleClickRight = (step) => {
-        this.setState({
-            x: this.state.x + step,
-            width: this.state.width + 50,
-            height: this.state.height + 50,
-        });
-        

-        console.log(step,this.state.width,this.state.height);
-    }

    getStyle() {
        let styles = {
-            width: this.state.width,
-            height: this.state.height,
+            width: 100,
+            height: 100,
            backgroundColor: "lightblue",
            textAlign: "center",
-            lineHeight: this.state.height + "px",
+            lineHeight: "100px",
            fontSize: "20px",
            color: "red",
+            marginTop: "10px",
+            marginLeft: this.props.box.x,
+            borderRadius: "5px",
        };

-        if (this.state.x % 2 === 0) {
+        if (this.props.box.x % 2 === 0) {
            styles.backgroundColor = "orange";
            styles.color = "black";
        }
@ -60,16 +40,19 @@ class Box extends Component {


    render() { 
-        return (
+        console.log(this.props); // 打印接受到的数据
+        return (         
        <React.Fragment>
            <div style={this.getStyle()}>{this.toString()}</div>
-            <button onClick={() => this.handleClickLeft(10)} className='btn btn-success sm' style={this.btn_1_style}>Smaller</button>
-            <button onClick={() => this.handleClickRight(10)}  className='btn btn-danger sm' style={this.btn_2_style}>Larger</button>
+            <button onClick={() => this.props.onLeft(this.props.box,5)} className='btn btn-success sm' style={this.btn_1_style}>Left</button>
+            <button onClick={() => this.props.onRight(this.props.box,5)}  className='btn btn-info sm' style={this.btn_2_style}>Right</button>
+            {/* 调用父元素中的函数 */}
+            <button onClick={() => this.props.onDelete(this.props.box.id)}  className='btn btn-danger sm' style={this.btn_3_style}>Delete</button>
        </React.Fragment>);
    }
    
    toString() {
-        return `x: ${this.state.x}\n width: ${this.state.width}\n height: ${this.state.height}`;
+        return `x: ${this.props.box.x}\n`;
    }   
 }
 
--- a/box/src/components/boxes.jsx
+++ b/box/src/components/boxes.jsx
@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import Box from './box';
+// Boxes: 父组件 Box: 子组件
+class Boxes extends Component {
+    state = { 
+        boxes: [
+            {id: 1, x: 1},
+            {id: 2, x: 2},
+            {id: 3, x: 3},
+            {id: 4, x: 4},
+        ]
+     } 
+
+    // 每个组件的state只能在该组件内访问！！！！
+    handleDelete = (BoxId) => {
+        // 保留所有id不同于BoxId的元素
+        const boxes = this.state.boxes.filter(box => box.id !== BoxId);
+        this.setState({boxes: boxes});
+
+    }
+
+    handleReset = () => {
+        const boxes = this.state.boxes.map(box => {
+            return {
+                id: box.id,
+                x: box.id,
+            }
+        });
+
+        this.setState({boxes:boxes});
+    }
+
+
+    handleClickLeft = (box,step) => {
+        const boxes = [...this.state.boxes]; // 浅拷贝
+        const k = boxes.indexOf(box); // box对应的index
+        boxes[k].x = Math.max(0,boxes[k].x - step);// 修改state中的x值
+        this.setState({boxes});
+
+    }
+
+    handleClickRight = (box,step) => {
+        const boxes = [...this.state.boxes]; // 浅拷贝
+        const k = boxes.indexOf(box); // box对应的index
+        boxes[k].x = Math.min(1000,boxes[k].x + step); // 修改state中的x值
+        this.setState({boxes});
+    }
+
+    render() { 
+        // 父元素给子元素传递数据
+        return (
+            <React.Fragment>
+                <button onClick={this.handleReset} style={{marginTop: "5px"}} className='btn btn-warning btn-sm'>Reset</button>
+                {this.state.boxes.map(box => (
+                    <Box key={box.id}
+                        box={box}
+                        onDelete={this.handleDelete}
+                        onLeft={this.handleClickLeft}
+                        onRight={this.handleClickRight}
+                         >
+                    </Box>
+                ))}
+            </React.Fragment>
+        );
+    }
+}
+ 
+export default Boxes;
--- a/box/src/components/navbar.jsx
+++ b/box/src/components/navbar.jsx
@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+class NavBar extends Component {
+    state = {  } 
+    render() { 
+        return (
+            <React.Fragment>
+                <nav className="navbar navbar-light bg-light">
+                    <div className="container-fluid">
+                    <span className="navbar-brand mb-0 h1">Boxes</span>
+                    </div>
+                </nav>
+            </React.Fragment>
+            
+        );
+    }
+}
+ 
+export default NavBar;
--- a/box/src/index.js
+++ b/box/src/index.js
@ -1,12 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import Box from './components/box';
 import "bootstrap/dist/css/bootstrap.css"
+import App from './components/app';

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <Box />
-  </React.StrictMode>
+  <App />
 );
--- a/solutions/src/components/solutions.jsx
+++ b/solutions/src/components/solutions.jsx
@ -42,8 +42,8 @@ class Solutions extends Component {
        if (this.state.solutions.length === 0) {
            return (
            <div id="warning">
-            <div class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+            <div className="alert alert-danger d-flex align-items-center" role="alert">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" className="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </svg>
            <div>
@ -55,9 +55,9 @@ class Solutions extends Component {
        }
        return (
            <React.Fragment>
-            <nav class="navbar navbar-expand-lg navbar-light bg-light">
-            <div class="container-fluid">
-            <span class="navbar-brand">题解列表</span>
+            <nav className="navbar navbar-expand-lg navbar-light bg-light">
+            <div className="container-fluid">
+            <span className="navbar-brand">题解列表</span>
            </div>
            </nav>