将数据从子级发送到父级React

小编典典

将数据从子级发送到父级React

reactjs

我不知道我在哪里做错了。我无法从孩子向父母发送数据。怎么了我该如何从孩子那里夺取州并发送给父州？

这是子组件

import React from 'react';

export class Child extends React.Component{
  constructor(props) {
    super(props);
    this.state= {
      counter2: 5
    }
  }

  render() {
    return(
      <div>
        <button onClick={this.props.data}>Click me</button><span>{this.state.counter2}</span>
      </div>
    );
  }
}

export default Child;

我想更新父组件中的状态

import React from 'react';
import {Child} from './Child';

export default class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state= {
      counter: 0
    }
  }

  update(){
    this.setState({
      counter: this.props.state.counter2
    });
  }

  render(){
    return(
      <div>
        <span>{this.state.counter}</span>
        <Child data={this.update.bind(this)}/>
      </div>
    );
  }
}

但是我有一个错误：×TypeError：无法读取未定义的属性“ counter”？

我不明白我做错了！

谢谢

阅读 270

2020-07-22

共1个答案

小编典典

实际上，state您父母的财产中没有财产props。您无法通过以下方式获取孩子的状态：

this.props.state.counter2

道具只从父组件传递给孩子（如果你不使用Redux或其他状态管理库）。

不过，您可以像这样通过它：

父组件

import React from 'react';
import {Child} from './Child';

export default class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state= {
      counter: 0
    }
  }

  update(value){
    return () => {
       this.setState({
         counter: value
       });
    }
  }

  render(){
    return(
      <div>
        <span>{this.state.counter}</span>
        <Child data={this.update.bind(this)}/>
      </div>
    );
  }
}

子组件

import React from 'react';

export class Child extends React.Component{
  constructor(props) {
    super(props);
    this.state= {
      counter2: 5
    }
  }

  render() {
    return(
      <div>
        <button onClick={this.props.data(this.state.counter2)}>Click me</button><span>{this.state.counter2}</span>
      </div>
    );
  }
}

export default Child;

2020-07-22