javascript - 使用 graphql 在 React 上的组件之间显示选择选项的数据

问题描述

所以基本上我很难理解我的下一步需要做什么。

在productList.jsProducts中有一个简单的选择下拉类组件，它使用 graphql(apollo)显示来自 (id, name, brand,vintage) 的所有数据。它可以工作并显示我的数据。
在Form.js 中，我只是将选择组件添加到表单中。有用。
在DividendRow.js中有一个简单的产品评论显示，它只使用 graphql(apollo) 显示每个产品的所有评论。
在Dividend.js中，我将表单与选择和评论部分合二为一并显示两者。

结果：

我只是想知道如何才能显示选定的选项评论？（on{select}Change）这将基于 id 值，因此如果选择产品选项id值 = 1，则在产品 id = 1 的地方显示评论。对此的任何帮助将不胜感激，一直在做一些研究，但不能找到任何好的例子来解决这个问题。

我的.js文件：

产品列表.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);

表单.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> 
              ))

               );

   } 
}

股息.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();

标签： javascriptreactjsgraphqlreact-apollo

解决方案

这里ProductList.js和DividendRow.js需要沟通所以可以定义和传递一个函数，Dividend.js并且ProductList.js可以知道选择的productId并且可以传递到DividendRow.js那里可以传递给查询以获取产品评论：

产品列表.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);