react 子组件和父组件之间传递值

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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!