parent
2773373c6b
commit
32756f0276
5 changed files with 107 additions and 89 deletions
@ -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) => { |
|
||||||
// 保留所有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 ( |
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…
Reference in new issue