javascript - 用于处理更改的 React Props 而不是函数

Question

运行以下代码时，我得到 props.handleChange is not a function 。我试图在单击复选框时更新状态。复选框字段称为 myNetwork。我想当 NetworkArray 组件(Card 组件的父组件)能够访问 App 中的函数和状态时？但这是我的第一个 React 应用程序。请问我做错了什么？

App.JS

import React, {Component} from 'react';
import SignUp from './components/SignUp';
import NetworkArray from './components/NetworkArray';
import {network} from './NetworkData'
import './App.css';
import 'tachyons';


class App extends Component  {
    constructor() {
    super()
    this.state = {
    network: network,
}
this.handleChange=this.handleChange.bind(this);

}
handleChange(id) {
  this.setState(prevState => {
    const updatedNetwork = prevState.network.map(netw => {
      if (netw.id===id) {
        netw.myNetwork = !netw.myNetwork
      }
      return netw
    })
    return {
      network:updatedNetwork
    }
  })
}

render() {
  return (
    <div>
   <NetworkArray 
   network={network}
   handleChange = {this.handleChange}  />
    </div>
  );
}
}
export default App;

Card.js

 import React from 'react';
const Card = (props) => {
    return(
        <div className = 'bg-light-green dib br3 pa3 ma2 grow  shadow-5'>

        <div>
            <h3>{props.name}</h3>
            <p>{props.company}</p> 
            <p>{props.phone}</p>
            <p>{props.email}</p>
            <p>{props.city}</p> 

         </div>
         <div> 
          MyNetwork
            <input 
                type = "checkbox"
                checked={props.myNetwork}
                onChange={()=> props.handleChange(props.id)}
                    /> 
            </div> 
         </div> 
        )
}

export default Card;

NetworkArray.js

import React, {Component} from 'react';
import Card from './Card';

const NetworkArray = ({network}) => {
    const cardComponent = network.map((user,i) => {
        return(
        <Card 
            key = {network[i].id}
            name = {network[i].firstName + ' ' + network[i].lastName} 
            company = {network[i].company}
            phone= {network[i].phone}
            email={network[i].email}
            city = {network[i].city}

            />
                    )
    })
        return ( 
                <div> 

                 {cardComponent}

                </div> 
            )
}

export default NetworkArray;

Answer 1

您将函数从 App 组件传递到 NetworkArray 组件，但没有传递到 Card 组件。

const NetworkArray = ({network, handleChange}) => {
    ...
    <Card
        handleChange={handleChange}
        ...
    />
}