代码之家 › 专栏 › 技术社区 › UI_Dev

使用props在父组件和子组件之间进行React js通信将数据从shop发送到prod details组件

reactjs

UI_Dev · 技术社区 · 7 年前

这是一个shop组件,它是一个父组件,在其中我有一个单击处理程序,在其中我需要向一个名为Prod Details的子组件发送数据。

而且点击事件是detailMovie,所以需要使用道具将其传递给孩子

import React from "react";
import { Link, browserHistory } from "react-router";
import { ProdDetails } from "./ProductDetails";
// import ProductsJSON from "../data/products.json";

export class Shop extends React.Component {
  // to route to details page from list
  onNavigateProdDetails() {
    browserHistory.push("/proddetails");
  }
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      selectedData: {}
    };
  }

  //API Call to fetch data
  componentDidMount() {
    fetch("https://facebook.github.io/react-native/movies.json")
      .then(Response => Response.json())
      .then(findresponse => {
        console.log(findresponse.movies);
        this.setState({
          data: findresponse.movies
        });
      });
  }
  detailMovie(moviedata) {
    //this.props.clickedItem = moviedata;
    this.selectedMovieList = moviedata;
  };

  render() {
    // find the clicked item and local storage
    let selectedMovie;
    

    return (
      <div className="shop pad-30">
        <h1>Latest Arrivals</h1>
        <div className="shop-inner">
          <div className="prods-wrap">
            {this.state.data.map((moviedata, i) => {
              return (
                <div
                  key={moviedata.id}
                  onClick={() => this.detailMovie(moviedata)}
                  data-key={moviedata.id}
                  className="shop-inner-each"
                >
                  <Link to="/proddetails">
                    <div className="shop-inner-each-img">
                      <img src={moviedata.image} className="img-fluid" />
                    </div>
                  </Link>
                  <div className="shop-inner-each-details">
                    <div className="shop-inner-each-details-left">
                      <Link to="/proddetails">
                        <h3>{moviedata.title}</h3>
                      </Link>
                      <p>$ {moviedata.releaseYear}</p>
                    </div>
                    <div className="shop-inner-each-details-right">
                      <button type="button" className="fi flaticon-like" />
                      <button
                        type="button"
                        className="fi flaticon-shopping-cart"
                      />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}

import React from "react";
import { browserHistory, Link } from "react-router";

export class ProdDetails extends React.Component {
  onNavigateShop() {
    browserHistory.push("/shop");
  }

  constructor(props) {
    super(props);
    // copy current list of items
  }

  render() {
    return (
      <div className="proddetails">
        <div className="proddetails-left">
          <img src="" />
        </div>
        <div className="proddetails-right">
          <div className="proddetails-right-inner">
            <Link to="/shop" className="btn btn-pagination">
              <i className="fi flaticon-left-arrow" /> Back
            </Link>
            {/* <h2>{this.props.movieData.title}</h2>
            <h3>$ {this.props.movieData.releaseYear}</h3> */}
            {/* <p>{this.updatedItem.description}</p> */}
            <div className="actions">
              <button type="button" className="btn btn-prime">
                <i className="fi flaticon-like" /> Add to Wishlist
              </button>
              <button type="button" className="btn btn-prime">
                <i className="fi flaticon-shopping-cart" /> Add to Cart
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

0 回复 | 直到 7 年前