Question

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

在 productList.js 中有一个简单的选择下拉类组件，它使用graphql（apollo）显示来自Products（id，name，brand，vintage）的所有数据。它有效，它显示我的数据。
在 Form.js 中，我只需将选择组件添加到表单中。它有效。
在 DividendRow.js 中有一个简单的产品评论显示，只显示使用graphql（apollo）的每个产品的所有评论。
在 Dividend.js 中，我将带有select和comments部分的表单添加到一个中并显示两者。

结果：

我想知道如何才能显示所选的评论？（在{select}更改）这将基于id值，因此如果选择产品选项id value = 1，则显示产品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();

Answer 1

这里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>
    );
  }
}

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

1 个答案: