मैं सूची घटक से किस आइटम पर क्लिक करता हूं, इसके आधार पर मैं किसी अन्य घटक के डेटा को अपडेट करने का प्रयास कर रहा हूं।

मेरे पास "मूवीज़" (बस मूवी शीर्षक) की एक सूची है। जब मैं सूची से किसी फिल्म के शीर्षक पर क्लिक करता हूं, तो मैं चाहता हूं कि कोई अन्य घटक उसकी जानकारी (शीर्षक और विवरण) दिखाए।

आवेदन का अवलोकन

पृष्ठ घटक

export default ({ movies }) => {
  return (
    <div id="home">
      <div className="movies">
        <List movies={movies}/>
      </div>
      <div className="">
        <Info movies={movies}/>
      </div>
    </div>
  );
}

सूची घटक

export default ({ movies }) => {
  return (
    <ul>
      {movies.map((movie, index) =>
        <li key={index}>
          {movie.title}
        </li>
      )}
    </ul>
  );
}

जानकारी घटक

export default ({ movies }) => {
  return (
    <div className="movie">
      <h2>{movies.title}</h2>     //Active movie title
      <p>{movies.description}</p> //Active movie description
    </div>
  );
}
1
Michal Kurowski 28 नवम्बर 2020, 19:05

2 जवाब

सबसे बढ़िया उत्तर

यह मदद कर सकता है

// List Component
export default ({ movies }) => {
  // set default selected state    
  const [selectedMovie, setSelectedMovie] = useState(null); 

  const handleClick = (movie) => {
     setSelectedMovie(movie); // set state here when select movie
  }

  return (
   <View>
     <ul>
      {movies.map((movie, index) =>
        <li key={index} onClick={() => handleClick(movie)}>
          {movie.title}
        </li>
      )}
     </ul>
     // render info comp if movie selected    
     { selectedMovie ? <InfoComponen movie={selectedMovie} /> : null } 
   </View>
  );
}


// Info Componen
export default ({ movie }) => {
  return (
    ........
  );
}
0
Nooruddin Lakhani 29 नवम्बर 2020, 10:24

इसे हासिल करने का एक आसान तरीका यह होगा कि movies को पेज कंपोनेंट के अंदर या रैपर कॉम्पोनेंट में हैंडल किया जाए।

पेजकंपोनेंट

export default () => {
  const [movies, setMovies] = useState([
    { title: "Movie Title 1", id: 1, active: false },
    { title: "Movie Title 2", id: 2, active: false },
    { title: "Movie Title 3", id: 3, active: false },
  ]);

  const onMovieClick = useCallback(
    (movie) => {
      setMovies(
        movies.map(({ id, ...other }) =>
          id === movie.id
            ? { ...other, id, active: true }
            : { ...other, id, active: false }
        )
      );
    },
    [movies, setMovies]
  );

  const selectedMovie = movies.filter(({ active }) => !!active);

  return (
    <div>
      <ListComponent movies={movies} onMovieClick={onMovieClick} />
      {selectedMovie.length ? (
        <InfoComponent movie={selectedMovie[0]} />
      ) : (
        "No movie selected"
      )}
    </div>
  );
};

और onMovieClick को ListComponent के अंदर हैंडल करें

export default ({ movies, onMovieClick }) => {
  return (
    <ul>
      {movies.map((movie, index) =>
        <li key={index} onClick={() => onMovieClick(movie)}>
          {movie.title}
        </li>
      )}
    </ul>
  );
}

जानकारी घटक

export default ({ movie }) => {
  // single movie
  return (
    <div className="movie">
      <h2>{movie.title}</h2>     
      <p>{movie.description}</p>
    </div>
  );
}
0
Domenico Ruggiano 28 नवम्बर 2020, 19:30