React如何将FriendsList组件的checkedPpl状态传递到FriendTagged组件

你当前是通过路由跳转从FriendsList切换到FriendTagged，无法直接通过组件props传参，按以下步骤修改即可实现需求：

1. 修复FriendsList的选中值存储逻辑 #

原代码中toggleCheckbox方法每次只会存储当前点击的单个好友，需要改为同步整个选中集合到state：

toggleCheckbox = label => {
  console.log("Inside toggle checkbox "+label+this.selectedCheckboxes)
  if (this.selectedCheckboxes.has(label)) {
    this.selectedCheckboxes.delete(label);
  } else {
    this.selectedCheckboxes.add(label);
  }
  // 把选中集合转成数组完整存入state
  this.setState({checkedPpl: Array.from(this.selectedCheckboxes)})
  console.log(this.state);
}

同时删除form标签上多余的onChange事件，避免覆盖正确的checkedPpl值。

2. 路由跳转携带选中参数 #

两种可选方式，推荐用路由state传参（地址栏不会暴露选中值）：

方式A：直接修改Link组件携带参数 #

把原来的Link标签改为以下写法，将选中值存入路由state：

<Link 
  to={{
    pathname: "/component/FriendTagged",
    state: { checkedPpl: this.state.checkedPpl }
  }} 
  className="btn btn-default" 
  style={linkStyle} 
  type="submit"
>
  Tag
</Link>

方式B：表单提交后跳转（更符合表单交互逻辑） #

注释掉原来的Link，在handleFormSubmit方法里完成跳转：

handleFormSubmit = formSubmitEvent => {
  formSubmitEvent.preventDefault();
  // 提交后跳转并传参
  this.props.history.push({
    pathname: "/component/FriendTagged",
    state: { checkedPpl: this.state.checkedPpl }
  })
}

同时给form表单加提交按钮：

<button type="submit" className="btn btn-default" style={linkStyle}>Tag</button>

注意：如果用这种方式，需要先用withRouter包裹FriendsList组件，才能拿到history属性：

// FriendsList.jsx 底部导出修改为
import { withRouter } from 'react-router-dom';
export default withRouter(FriendsList);

3. FriendTagged组件接收参数 #

类组件需要用withRouter包裹才能拿到路由参数，修改代码如下：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import sampleImg from '../assets/SampleImg.jpg';

class FriendTagged extends Component {
  render() {
    // 从路由state中拿到选中的好友列表
    const checkedPpl = this.props.location.state?.checkedPpl || [];
    return (
      <div className="container">
        <h3 style={{ padding: "10px 20px", textAlign: "center", color: "#44014C"}}>Tagged Together</h3>
        <img src={sampleImg} width="250" height="200"/>
        <h6 style={{ padding: "10px 20px", textAlign: "center", color: "#FF00FF"}}>Friends tagged on this photo are:</h6>
        {/* 遍历展示选中的好友 */}
        <ul>
          {checkedPpl.map(name => <li key={name}>{name}</li>)}
        </ul>
      </div>
    )
  }
}

export default withRouter(FriendTagged);

同页面渲染补充方案 #

如果不需要跳转路由，直接在FriendsList组件内渲染FriendTagged，直接传props即可：

// FriendsList的render方法末尾加
<FriendTagged data={this.state.checkedPpl} />

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