React Render другой компонент, который соответствует текущему компоненту - PullRequest
Новая
       9

React Render другой компонент, который соответствует текущему компоненту

0 голосов
/ 24 октября 2019

У меня есть компонент Card.js, который рендерит в формате карты, полученной из массива данных. Я хочу добиться того, чтобы щелкнуть карточку, а затем открыть другой компонент с именем Suggestion.js, но я хочу открыть результаты только в том случае, если идентификатор карточки совпадает с идентификатором предложения. Я настроил функцию handleClick, но у меня возникают проблемы с созданием кода для работы. Мне нужна помощь с кодом, чтобы изменить состояние предложения в соответствии с предложениями, где идентификатор совпадает на карте, по которой щелкают. Спасибо!

App.js 

import React, {Component} from 'react';
import SignUp from './components/SignUp';
import NetworkArray from './components/NetworkArray';
import {network} from './NetworkData';
import {suggest} from './components/Suggest';
import './App.css';
import 'tachyons';
import Searchbox from './components/Searchbox';
import SignIn from './components/SignIn';
import Navigation from './components/Navigation';
import MyNetworkArray from './components/MyNetworkArray';
import SuggestArray from './components/SuggestArray';


class App extends Component  {

    constructor() {
    super()
    this.state = {
    network: network,
    suggest:suggest,
    searchfield:'',
    route:'signin'
}
this.handleChange=this.handleChange.bind(this);
this.handleClick=this.handleClick.bind(this);

}

onSearchChange=(event)=> {
  this.setState({searchfield:event.target.value})

}
handleClick(id)  {
                   //Code to render Suggestion.js to match id of Card Clicked
             }



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

onRouteChange=(route) => {
  this.setState({route:route})

}

render() {
  const filteredNetwork = this.state.network.filter(netw => {
    return netw.lastName.toLowerCase().includes(this.state.searchfield.toLowerCase())
  })

  return (
    <div className = "tc">
    <Navigation onRouteChange={this.onRouteChange} /> 
    {
    this.state.route==='home' ?
      <div> 
      <h2 className = "ml6">Members</h2> 
         <Searchbox searchChange = {this.onSearchChange}
          onRouteChange = {this.onRouteChange}
          /> 
         <NetworkArray 
             network={filteredNetwork}
             handleChange = {this.handleChange} 
             handleClick ={this.handleClick} 
             selectedCard={this.state.suggest}
             />
      </div> 
     : (
      this.state.route==='mynetwork' ? (
        <div>
         <h2 className = "ml6">My Network</h2>
         <Searchbox searchChange = {this.onSearchChange}
          onRouteChange = {this.onRouteChange} />
          <MyNetworkArray onRouteChange = {this.onRouteChange}
          handleChange = {this.handleChange}
          network = {filteredNetwork}/>
          </div>
       ) :  this.state.route === 'register' ?  (
          <SignUp onRouteChange = {this.onRouteChange} />
          ) :this.state.route ==='signin' ? (
          <SignIn onRouteChange = {this.onRouteChange}/>
          ) : this.state.route === 'suggestions' ? (
          <SuggestArray onRouteChange = {this.onRouteChange}
          suggest = {suggest}/>
          ) : (<SignIn /> )
    )

}

    </div>
  );
 }
}
export default App;

Card.js 

import React from 'react';

const Card = (props,handleClick) => {

    return(
        <div className = 'pointer bg-light-green dib br3 pa3 ma2 grow  shadow-5'
        onClick = {() => props.handleClick(props.id)}>

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

         </div>
         <div> 
            My Network
            <input className ="largeCheckbox"
                type = "checkbox"
                checked={props.isChecked}
                onChange={()=> props.handleChange(props.id)}
                    /> 
            </div> 
         </div> 

        )
}

export default Card;

SuggestArray.js 

import React from 'react';
import Table from './Table';

const SuggestArray = ({suggest,handleChange}) => {
    const tableComponent = suggest.map((user,i) => {
        return(
        <Table 
            key = {suggest[i].id}
            location = {suggest[i].location} 
            restaurants = {suggest[i].restaurant}
            resdescription= {suggest[i].resdescription}
            attractions={suggest[i].attractions}
            attdescription = {suggest[i].attdescription}
            id={suggest[i].id}

            />

                    )
    })
        return ( 
                <div> 

                 {tableComponent}


                </div> 
            )
}

export default SuggestArray;

1 Ответ

1 голос
/ 24 октября 2019

После дальнейшего понимания вашего вопроса, я предлагаю вам отфильтровать предложения в вашем состоянии, когда вы обрабатываете клик. 

handleClick(id)  {
  this.setState({
    suggest: suggest.filter(suggest => suggest.id === id)
  });
}
...