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
Split 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. 79
      box/src/components/boxes.jsx
  5. 26
      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" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Box</title>
<title>Boxes</title>
</head>
<body>

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

@ -3,14 +3,85 @@ import NavBar from './navbar';
import Boxes from './boxes';
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() {
console.log("App---Rendered");
return (
<React.Fragment>
<NavBar></NavBar>
<div className="container">
<Boxes></Boxes>
</div>
<NavBar
boxNumberCount={this.state.boxes.filter(b => b.x <= 10).length}
></NavBar>
<Boxes
boxes={this.state.boxes}
onReset={this.handleReset}
onDelete={this.handleDelete}
onLeft={this.handleClickLeft}
onRight={this.handleClickRight}
></Boxes>
</React.Fragment>
);
}

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

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

79
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';
// 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>
);
}
const Boxes = ({boxes,onReset,onDelete,onLeft,onRight}) => {
return (
<React.Fragment>
<button onClick={onReset} style={{marginTop: "5px"}} className='btn btn-warning btn-sm'>Reset</button>
{boxes.map(box => (
<Box key={box.id}
box={box}
onDelete={onDelete}
onLeft={onLeft}
onRight={onRight}
>
</Box>
))}
</React.Fragment>
);
}
export default Boxes;

26
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 = { }
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>
);
}
const NavBar = (props) => {
return (
<React.Fragment>
<nav className="navbar navbar-light bg-light">
<div className="container-fluid">
<span className="navbar-brand mb-0 h1">NarBar box number: {props.boxNumberCount}</span>
</div>
</nav>
</React.Fragment>
);
}
export default NavBar;
Write Preview
Loading…
Cancel
Save