javascript — реагирует на изменение дескриптора, а не на функцию

Реагировать реквизит для смены дескриптора не функция

Я получаю props.handleChange не является функцией при запуске следующего кода. Я пытаюсь обновить состояние, когда установлен флажок. Поле, которое является флажком, называется myNetwork. Я думал, что когда компонент NetworkArray, который является родителем компонента Card, будет иметь доступ к функциям и состоянию в приложении? Но это мое первое приложение 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 ={amp}gt; { const updatedNetwork = prevState.network.map(netw ={amp}gt; { if (netw.id===id) { netw.myNetwork = !netw.myNetwork } return netw }) return { network:updatedNetwork } }) } render() { return ( {amp}lt;div{amp}gt; {amp}lt;NetworkArray network={network} handleChange = {this.handleChange} /{amp}gt; {amp}lt;/div{amp}gt; ); } } export default App; 

Card.js

  import React from 'react'; const Card = (props) ={amp}gt; { return( {amp}lt;div className = 'bg-light-green dib br3 pa3 ma2 grow shadow-5'{amp}gt; {amp}lt;div{amp}gt; {amp}lt;h3{amp}gt;{props.name}{amp}lt;/h3{amp}gt; {amp}lt;p{amp}gt;{props.company}{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{props.phone}{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{props.email}{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{props.city}{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; MyNetwork {amp}lt;input type = "checkbox" checked={props.myNetwork} onChange={()={amp}gt; props.handleChange(props.id)} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ) } export default Card; 

NetworkArray.js

 import React, {Component} from 'react'; import Card from './Card'; const NetworkArray = ({network}) ={amp}gt; { const cardComponent = network.map((user,i) ={amp}gt; { return( {amp}lt;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} /{amp}gt; ) }) return ( {amp}lt;div{amp}gt; {cardComponent} {amp}lt;/div{amp}gt; ) } export default NetworkArray; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector