将对象从子状态传递给父状态

Posted 2023-02-23

【中文标题】将对象从子状态传递给父状态

【英文标题】：Passing object to parent state from child

【发布时间】：2019-10-27 18:59:07

【问题描述】：

有什么方法可以将对象从子组件推送到父道具？

【问题讨论】：

How to pass data from child component to its parent in ReactJS?的可能重复

【参考方案1】：

您可以将一个函数从父级传递给子级，该函数可以设置父级中对象的状态。

import React,  Component  from 'react';
import  render  from 'react-dom';

const Child = (saveObj) => (
  <div
    onClick=() => 
      saveObj(test: "test")
    
  >
    Click to set obj
  </div>
) 

class App extends Component 
  constructor() 
    super();
    this.state = 
      obj : null
    ;
  

  render() 
    return (
      <div>
        Obj is: JSON.stringify(this.state.obj)
        <p>
          <Child saveObj=obj => this.setState(obj) />
        </p>
      </div>
    );
  


render(<App />, document.getElementById('root'));

实时示例：https://stackblitz.com/edit/react-snivhc