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

IT技术 reactjs
2021-05-21 19:55:46

我不知道我哪里做错了。我无法将数据从孩子发送给父母。这里有什么问题？如何从孩子那里获取状态并发送到父状态？

这是子组件

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：无法读取未定义的属性“计数器”？

我不明白我做错了什么！

谢谢

2个回答

实际上，您state在 Parent 的props. 你不能以这种方式获得孩子的状态：

this.props.state.counter2

props只从父组件传递给孩子（如果你不使用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;

您没有content2正确地在子组件中传递状态

你需要用按钮传递它

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

然后在您的更新功能中

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

注意：如果您像我一样使用箭头函数，则无需绑定更新函数。

  <div>
    <span>{this.state.counter}</span>
    <Child data={this.update)}/>
  </div>
其它你可能感兴趣的问题
上一篇在 PEX 表面打印 PLA - 需要加热床吗？ 下一篇RAMPS 1.6 板上短路？