Отображение данных о выборе между компонентами в React с использованием graphql - PullRequest
Новая
       13

Отображение данных о выборе между компонентами в React с использованием graphql

0 голосов
/ 13 июня 2018

Так что в основном я изо всех сил пытаюсь понять, каким должен быть мой следующий шаг.

  • В productList.js есть простой компонент раскрывающегося класса выбора, и он отображает все данные из Products (id, name, brand, vintage) с помощью graphql (Аполлон).Это работает и отображает мои данные.

  • В Form.js Я просто добавляю компонент select в форму.Это работает.

  • В DividendRow.js имеется простое отображение комментариев к продукту, которое просто отображает все комментарии каждого продукта с использованием graphql (apollo).

  • In Dividend.js Я добавляю форму с разделом выбора и комментариями в одном и отображаю оба.

Итог:

Хотелось бы узнать, как я смогу показать выбранный комментарий опции?(on {select} Change) Это будет основано на значении id, поэтому, если выбрать опцию продукта id value = 1, то отобразить комментарий, где product id = 1. Любая помощь по этому вопросу будет высоко ценится, делает некоторыеисследования, но не могу найти хорошего примера, как подойти к этому.

Мои .js файлы:

ProductList.js 

// ProductList.js

import React, { Component } from 'react';
import { graphql } from "react-apollo";
import { gql } from "apollo-boost";

const getProductsQuery = gql`
  {
  Products {
        id
        name
        brand
        vintage
    }
  }
`
class ProductList extends Component {  

  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
   // this.handleSubmit = this.handleSubmit.bind(this);
  }    

 handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

render() {
  const { data: { loading, error, Products, id } } = this.props;

   if (loading) {
          return (<div>Loading Product Listing...</div>);
   }else if(error) {
        return   (<p>Error! Stewart Error!</p>);       
   }else{
       return (
           <div>       
            <select name="product" value={this.state.value} onChange={this.handleChange} className="custom-select form-control 3" id="listproducts">
                {Products.map(({ id, name, brand, vintage }) => (
                 <option key={id} value={id}>
                  {name} - {brand} - {vintage}  
                  </option>
                ))} 
            </select>
            </div>
               );

   } 
}
}
export default graphql(getProductsQuery)(ProductList);

Form.js 

// Form.js

import React, { Component } from 'react';

import   ProductList   from './ProductList';
import { ProductAddComment } from './ProductAddComment';

export class Form extends Component {
  render() {
    return (
        <form action="" method="GET" id="product-comments">

      <ProductList/>

     // <ProductAddComment/>

            <button type="submit" className="btn btn-primary">Submit</button>
        </form>
    );
  }
}

DividendRow.js 

// DividendRow.js

import React, { Component } from 'react';

import { graphql } from "react-apollo";
import { gql } from "apollo-boost";


const getProductsCommentsQuery = gql`
{
  Comments {
    id
    body
    date
    Product {
      complete_name
    }
  }
}
`

class DividendRow extends Component {  

render() {
  const { data: { loading, error, Comments } } = this.props;
   if (loading) {
          return (<div>Loading Product Listing...</div>);
   }else if(error) {
        return   (<p>Error! Stewart Error!</p>);       
   }else{
       return (


                Comments.map(({ id, body, date, Product }) => (            
                <div  key={id} id={id} className="contents">
                    <span className="date">{date}</span>
                    <h4 className="product-name">{Product.complete_name}</h4>
                    <p className="product-comment">{body}</p>
                </div> 
              ))

               );

   } 
}

Dividend.js 

// Dividend.js

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


import { Form } from './Form';

export class Dividend extends Component {

  render() {
    return (


<div className="container"> 
<div className="row"> 
<div className="col-lg-12">

    <Form/> 

    <h1 className="product">All Products</h1>

     <DividendRow />

</div>
</div>
</div>
    );
  }
}

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from "apollo-boost";
import gql from "graphql-tag";
import { ApolloProvider } from "react-apollo";
//import './index.css';
import { Dividend } from './Dividend';
import registerServiceWorker from './registerServiceWorker';

const client = new ApolloClient({
  uri: "https://test.azurewebsites.net/graphql"
});

function MyDividend() {
  return (
    <ApolloProvider client={client}>
      <Dividend
      />
    </ApolloProvider>
  )
}

ReactDOM.render(<MyDividend  />, document.getElementById('root'));
registerServiceWorker();

1 Ответ

0 голосов
/ 13 июня 2018

Здесь ProductList.js и DividendRow.js необходимо установить связь. Таким образом, функция может быть определена в Dividend.js и передана в ProductList.js, а выбранный productId может быть известен и может быть передан в DividendRow.js, а там это может бытьпередано на запрос, чтобы получить комментарии к продукту:

ProductList.js: 

    // ProductList.js

import React, { Component } from 'react';
import { graphql } from "react-apollo";
import { gql } from "apollo-boost";

const getProductsQuery = gql`
  {
  Products {
        id
        name
        brand
        vintage
    }
  }
`

    class ProductList extends Component {  

      constructor(props) {
        super(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
       // this.handleSubmit = this.handleSubmit.bind(this);
        this.handleClick = this.handleClick.bind(this)
      }    

     handleChange = (event) => {
        this.setState({ value: event.target.value });
      };

     handleClick(id) {
        this.props.selectId(id);
       } 

    render() {
      const { data: { loading, error, Products, id } } = this.props;

       if (loading) {
              return (<div>Loading Product Listing...</div>);
       }else if(error) {
            return   (<p>Error! Stewart Error!</p>);       
       }else{
           return (
               <div>       
                <select name="product" value={this.state.value} onChange={this.handleChange} className="custom-select form-control 3" id="listproducts">
                    {Products.map(({ id, name, brand, vintage }) => (
                     <option key={id} value={id} onClick={()=>this.handleClick(id)}>
                      {name} - {brand} - {vintage}  
                      </option>
                    ))} 
                </select>
                </div>
                   );

       } 
    }
    }
    export default graphql(getProductsQuery)(ProductList);

Form.js 

    // Form.js

import React, { Component } from 'react';

import   ProductList   from './ProductList';
import { ProductAddComment } from './ProductAddComment';

export class Form extends Component {
  render() {
    return (
        <form action="" method="GET" id="product-comments">

      <ProductList selectId={this.props.selectId}/>

     // <ProductAddComment/>

            <button type="submit" className="btn btn-primary">Submit</button>
        </form>
    );
  }
}

DividendRow.js 

        // DividendRow.js

    import React, { Component } from 'react';

    import { graphql } from "react-apollo";
    import { gql } from "apollo-boost";


    const getProductsCommentsQuery = gql`
    query($id: ID){
      Comments(id: $id){
        id
        body
        date
        Product {
          complete_name
        }
      }
    }
    `

    class DividendRow extends Component {  

    render() {
      const { data: { loading, error, Comments } } = this.props;
       if (loading) {
              return (<div>Loading Product Listing...</div>);
       }else if(error) {
            return   (<p>Error! Stewart Error!</p>);       
       }else{
           return (


                    Comments.map(({ id, body, date, Product }) => (            
                    <div  key={id} id={id} className="contents">
                        <span className="date">{date}</span>
                        <h4 className="product-name">{Product.complete_name}</h4>
                        <p className="product-comment">{body}</p>
                    </div> 
                  ))

                   );

       } 
    }
   export default graphql(getProductsCommentsQuery,{
  options:(props)=>{
    return {
      variables: {
        id: props.productId,
      }
    }
  }
})(DividendRow);

Dividend.js 

    // Dividend.js

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


import { Form } from './Form';

export class Dividend extends Component {
  state = {
    productId: null,
     }
  selectId=(id)=>{
    this.setState({productId: id});
   }
  render() {
    return (


<div className="container"> 
<div className="row"> 
<div className="col-lg-12">

    <Form selectId={this.selectId} /> 

    <h1 className="product">All Products</h1>

     <DividendRow productId ={this.state.productId} />

</div>
</div>
</div>
    );
  }
}
...