多组件通信

master
barney 2 years ago
parent 2773373c6b
commit 32756f0276
  1. 2
      box/public/index.html
  2. 79
      box/src/components/app.jsx
  3. 4
      box/src/components/box.jsx
  4. 61
      box/src/components/boxes.jsx
  5. 10
      box/src/components/navbar.jsx

@ -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>

@ -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) => {
// idBoxId
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); // boxindex
boxes[k].x = Math.max(0,boxes[k].x - step);// statex
this.setState({boxes});
}
handleClickRight = (box,step) => {
const boxes = [...this.state.boxes]; //
const k = boxes.indexOf(box); // boxindex
boxes[k].x = Math.min(1000,boxes[k].x + step); // statex
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>
); );
} }

@ -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>

@ -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) => {
// idBoxId
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); // boxindex
boxes[k].x = Math.max(0,boxes[k].x - step);// statex
this.setState({boxes});
}
handleClickRight = (box,step) => {
const boxes = [...this.state.boxes]; //
const k = boxes.indexOf(box); // boxindex
boxes[k].x = Math.min(1000,boxes[k].x + step); // statex
this.setState({boxes});
}
render() {
//
return ( return (
<React.Fragment> <React.Fragment>
<button onClick={this.handleReset} style={{marginTop: "5px"}} className='btn btn-warning btn-sm'>Reset</button> <button onClick={onReset} style={{marginTop: "5px"}} className='btn btn-warning btn-sm'>Reset</button>
{this.state.boxes.map(box => ( {boxes.map(box => (
<Box key={box.id} <Box key={box.id}
box={box} box={box}
onDelete={this.handleDelete} onDelete={onDelete}
onLeft={this.handleClickLeft} onLeft={onLeft}
onRight={this.handleClickRight} onRight={onRight}
> >
</Box> </Box>
))} ))}
</React.Fragment> </React.Fragment>
); );
}
} }
export default Boxes; export default Boxes;

@ -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">Boxes</span> <span className="navbar-brand mb-0 h1">NarBar box number: {props.boxNumberCount}</span>
</div> </div>
</nav> </nav>
</React.Fragment> </React.Fragment>
); );
}
} }
export default NavBar; export default NavBar;
Loading…
Cancel
Save