React中如何将子组件的state数据传递给父组件（新手向）

核心逻辑 #

React数据流是单向的，子组件无法直接给父组件传值，你可以通过「父组件传递回调函数给子组件，子组件触发事件时调用该回调并将数据作为参数回传」的方式实现需求。
你当前场景中important和like两个状态父组件渲染时也要使用，更合理的做法是将状态提升到父组件维护，子组件仅负责交互触发，避免状态重复维护。

第一步：修改父组件代码 #

//Parent
import React, { Component } from "react";
import PostButtons from "../post-buttons";

import "./post-list-item.css";

export default class PostListItem extends Component {
  constructor(props) {
    super(props);
    // 将需要共享的状态提升到父组件维护
    this.state = {
      important: false,
      like: false
    };
    // 绑定方法上下文
    this.onToggleImportant = this.onToggleImportant.bind(this);
    this.onToggleLike = this.onToggleLike.bind(this);
  }

  // 处理important状态切换
  onToggleImportant() {
    this.setState(({ important }) => ({
      important: !important
    }));
  }

  // 处理like状态切换
  onToggleLike() {
    this.setState(({ like }) => ({
      like: !like
    }));
  }

  render() {
    const { label } = this.props;
    const { important, like } = this.state;

    let classNames = "app-list-item d-flex justify-content-between";

    // 直接使用父组件自己维护的状态拼接类名
    if (important) {
      classNames += " important";
    }
    if (like) {
      classNames += " like";
    }

    return (
      <div className={classNames}>
        <span className="app-list-item-label">{label}</span>
        <div className="d-flex justify-content-center align-items-center">
          {/* 将状态切换方法作为props传递给子组件 */}
          <PostButtons 
            onToggleImportant={this.onToggleImportant}
            onToggleLike={this.onToggleLike}
          />
        </div>
      </div>
    );
  }
}

第二步：修改子组件代码 #

子组件不需要再自己维护important和like状态，直接调用父组件传递的回调方法即可：

//Child
import React from "react";
import { Component } from "react";

import "./post-buttons.css";

class PostButtons extends Component {
  render() {
    // 从props中取出父组件传递的回调方法
    const { onToggleImportant, onToggleLike } = this.props;
    return (
      <>
        <button
          type="button"
          className="btn-star btn-sm"
          onClick={onToggleImportant}
        >
          <i className="fa fa-star"></i>
        </button>
        <button type="button" className="btn-trash btn-sm">
          <i className="fa fa-trash-o"></i>
        </button>
        <i className="fa fa-heart" onClick={onToggleLike}></i>
      </>
    );
  }
}

export default PostButtons;

如果你确实需要把状态保留在子组件内，也可以在子组件setState的第二个参数（回调函数，状态更新完成后触发）里调用父组件传过来的回调，把最新状态传回去即可，不过这种场景下状态重复维护容易出现数据不一致的问题，更推荐上面的状态提升方案。

内容的提问来源于stack exchange，提问作者PaulRuban