zfp
/
react_demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

多组件通信

Browse Source
master
barney 2 years ago
parent 2773373c6b
commit 32756f0276
5 changed files with 107 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      box/public/index.html
  2. 79
      box/src/components/app.jsx
  3. 4
      box/src/components/box.jsx
  4. 81
      box/src/components/boxes.jsx
  5. 30
      box/src/components/navbar.jsx

2
box/public/index.html
Unescape View File

@ -9,7 +9,7 @@
<meta name="description" content="Web site created using create-react-app" /> <meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Box</title> <title>Boxes</title>
</head> </head>
<body> <body>

79
box/src/components/app.jsx
Unescape View File

@ -3,14 +3,85 @@ import NavBar from './navbar';
import Boxes from './boxes'; import Boxes from './boxes';
class App extends Component { class App extends Component {
state = {
boxes: [
{id: 1, x: 1},
{id: 2, x: 2},
{id: 3, x: 3},
{id: 4, x: 4},
]
}
// constructor() {
// super();
// console.log("App---constructed");
// }
// componentDidUpdate(prevProps,prevState) {
// console.log("prevState",prevState,this.state); // 为什么打印出来的数据是相同的
// }
// componentDidMount() {
// console.log("App---Mounted");
// }
// 每个组件的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,
// }
// });
const boxes = [
{id: 1, x: 1},
{id: 2, x: 2},
{id: 3, x: 3},
{id: 4, x: 4},
]
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() { render() {
console.log("App---Rendered");
return ( return (
<React.Fragment> <React.Fragment>
<NavBar></NavBar> <NavBar
<div className="container"> boxNumberCount={this.state.boxes.filter(b => b.x <= 10).length}
<Boxes></Boxes> ></NavBar>
</div> <Boxes
boxes={this.state.boxes}
onReset={this.handleReset}
onDelete={this.handleDelete}
onLeft={this.handleClickLeft}
onRight={this.handleClickRight}
></Boxes>
</React.Fragment> </React.Fragment>
); );
} }

4
box/src/components/box.jsx
Unescape View File

@ -15,8 +15,6 @@ class Box extends Component {
margin: "10px 0px 0px 20px", margin: "10px 0px 0px 20px",
} }
getStyle() { getStyle() {
let styles = { let styles = {
width: 100, width: 100,
@ -38,9 +36,7 @@ class Box extends Component {
return styles; return styles;
} }
render() { render() {
console.log(this.props); // 打印接受到的数据
return ( return (
<React.Fragment> <React.Fragment>
<div style={this.getStyle()}>{this.toString()}</div> <div style={this.getStyle()}>{this.toString()}</div>

81
box/src/components/boxes.jsx
Unescape View File

@ -1,68 +1,21 @@
import React, { Component } from 'react'; import React from 'react';
import Box from './box'; 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只能在该组件内访问！！！！ const Boxes = ({boxes,onReset,onDelete,onLeft,onRight}) => {
handleDelete = (BoxId) => { return (
// 保留所有id不同于BoxId的元素 <React.Fragment>
const boxes = this.state.boxes.filter(box => box.id !== BoxId); <button onClick={onReset} style={{marginTop: "5px"}} className='btn btn-warning btn-sm'>Reset</button>
this.setState({boxes: boxes}); {boxes.map(box => (
<Box key={box.id}
} box={box}
onDelete={onDelete}
handleReset = () => { onLeft={onLeft}
const boxes = this.state.boxes.map(box => { onRight={onRight}
return { >
id: box.id, </Box>
x: box.id, ))}
} </React.Fragment>
}); );
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; export default Boxes;

30
box/src/components/navbar.jsx
Unescape View File

@ -1,19 +1,17 @@
import React, { Component } from 'react'; import React from 'react';
class NavBar extends Component {
state = { } const NavBar = (props) => {
render() { return (
return ( <React.Fragment>
<React.Fragment> <nav className="navbar navbar-light bg-light">
<nav className="navbar navbar-light bg-light"> <div className="container-fluid">
<div className="container-fluid"> <span className="navbar-brand mb-0 h1">NarBar box number: {props.boxNumberCount}</span>
<span className="navbar-brand mb-0 h1">Boxes</span> </div>
</div> </nav>
</nav> </React.Fragment>
</React.Fragment>
);
);
}
} }
export default NavBar; export default NavBar;

Write Preview
Loading…
Cancel
Save