react组件之间传递值,其实和angular的output、input类似,他用的是属性来传递的props,
父-》子
在父组件中引用子组件的时候,设置属性即可,然后在子组件中 通过 this.props.name就可以获取。
子-》父
子组件中调用,父组件中定义的属性(方法),将参数传递获取。
如图,子组件中进行加减,父组件中统计总数。
1、子组件代码
import React, { Component } from 'react';
export default class Count extends Component {
constructor(props) {
// 属性一般都是在父界面中引用子组件的时候赋值,传递过来的。
super(props);
// 初始化数量为
this.state = {
count: this.props.value
};
// 要在函数内部使用 this.state/this.props必须绑定this
this.onClickButton = this.onClickButton.bind(this);
this.onClickButtonTwo = this.onClickButtonTwo.bind(this);
this.updateInfo = this.updateInfo.bind(this);
}
// 定义单机方法
onClickButton() {
this.updateInfo(true);
}
onClickButtonTwo() {
this.updateInfo(false);
}
updateInfo(state) {
const firstValue = this.state.count;
let newValue = 0;
if (state) {
newValue = firstValue + 1;
}
else {
if (firstValue > 0) {
newValue = firstValue - 1;
}
}
// 更新子组件状态
this.setState(
{
count: newValue
}
)
// 更新父组件 props, 传递新的数量和原来的数量
this.props.onUpDate(newValue, firstValue);
}
render() {
return (
<div style={countStyle}>
<button onClick={this.onClickButton}>+</button>
<button onClick={this.onClickButtonTwo}>—</button>
<div>
{this.state.count}
</div>
</div>
);
const countStyle = {
margin: "10px",
padding: "10px"
}
}
}
2、父组件代码
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Count from "./component/Count";
class App extends Component {
constructor(props) {
super(props);
this.totalCountFun = this.totalCountFun.bind(this);
this.initArr = [4, 5];
this.state = {
total: this.initArr[0] + this.initArr[1]
}
}
totalCountFun(newVal, first) {
console.log(first, newVal);
let totalNum = this.state.total;
if (newVal > first) {
totalNum = totalNum + 1;
}
if(newVal < first) {
totalNum = totalNum - 1;
}
this.setState(
{ total: totalNum }
)
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<Count value={this.initArr[0]} onUpDate={this.totalCountFun}></Count>
<Count value={this.initArr[1]} onUpDate={this.totalCountFun}></Count>
<div>
总数:{this.state.total}
</div>
</div>
);
}
}
export default App;
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。