如何解决：如何通过onClick到div显示状态？（反应）

Question

I have sidebar with document types on it(docs, table, slider, html ..). I want that, if i click on docs element it will show docs in another div like a header.

I have 3 files: DocumentType.tsx, Sidebar.tsx and Results.tsx

In DocumentType.tsx:

import React from 'react';

const documentType = (props ) =>{
     return(
        <div>
          <p id="fileType">{props.type}</p>
        </div>
     )
};

export default documentType;

In Sidebar.tsx:

          typeState = {
        documentTypes: [
          { type: "Dokumendid" },
          { type: "PDF" },

        ]
      }




    toDocument = () => {
        this.setState({
          documentTypes: [
            { type: "Dokumendid" }
            console.log("Document was clicked");
          ]
        })
      }


      toPdf = () => {
        this.setState({
          documentTypes: [
            { type: "Pdf" }
            console.log("PDF was clicked")
          ]
        })
      }

  render(){
    return(
            <a className="a" href="/search?filter%3Atype=doc" onClick={this.toDocument}>
            <div className="icons dokument">
              <img src={dokument} alt="dokument"/>
              <a className="title">dokument</a>
            </div>
        </a>

        <a className="a" href="/search?filter%3Atype=pdf" onClick={this.toPdf}>
            <div className="icons pdf">
              <img src={pdf} alt="pdf"/>
              <a className="title">pdf</a>
            </div>
        </a>
  )
}

And in Results.tsx:

...

<DocumentType />

..

Answer 1

If I understood your question correctly.. you wanted to show data in a div when onClick event triggers..

lets say your state object has

state = {
data: ''
}

//clicked function

clicked =() => {
this.setState({data: 'clickedme'})
}

div element: <div onClick={this.clicked} >{this.state.data}</div>

simple example when an onClick event occurs a div and displaying the state data object..

Answer 2

You want to show a document type in Results component when a document in Sidebar component is clicked.

You have documentType state in Sidebar component and you want to pass it to Results component. So for that you can make Results component as child component of Sidebar component and pass the selected document type ie documentType state as props.

Sidebar.js

import React, {Component} from 'react'
import Results from 'path-to-results';

class Sidebar extends Component {
  state = {
    // instead of using "documentType" as array 
    // you can make it null for initial value
    documentType: null
  }

  // instead of using "toPDF" or "toDocument" method
  // you can use single method to update the state
  handleDocType = (docType) => {
       this.setState({
          documentType: docType
       })
  }

  render() {
    return (
       <div>
         // pass "document" as argument to handleDocType method
         <a className="a" href="#" onClick={() => this.handleDocType('document')}>
           <div className="icons dokument" >
             <img src="" alt="dokument"/>
             <a className="title">dokument</a>
           </div>
        </a>
        // pass "pdf" as argument to handleDocType method
        <a className="a" href="#" onClick={() => this.handleDocType('pdf')}>
            <div className="icons pdf">
             <img src="" alt="pdf"/> 
             <a className="title">pdf</a>
           </div>
        </a>
         // checking if "documentType" is null or not
         // if it is null nothing is rendered
         // if it is not null then "Results" component is rendered
         { this.state.documentType && <Results type={this.state.documentType} /> }
      </div>
    )

  }
}

Results.js

import React, { Component } from 'react'
import DocType from 'path-to-doctype'


class Results extends Component {
  // .... your other codes
  render() {
   return (
      <div>
        // ....... your other codes
       <DocType type={this.props.type} />
      </div>
   )
  }
}

export default Results

DocType.js

import React from 'react';

const DocumentType = (props ) =>{
     return(
        <div>
          <p id="fileType">{props.type}</p>
        </div>
     )
};

export default DocumentType;

UPDATE

If Sidebar and DocType components are children components of Results component then add documentType state to Results component and pass documentType state as props to DocType component.

Results.js

class Results extends Component {
  // add state "documentType"
  state = {
    documentType: null
  }

  // add "handleDocType" method
  handleDocType = (docType) => {
    this.setState({
      documentType: docType
    })
  }

  // .... your other codes

  render() {
   return (
    <div>
      // .... your other codes
      // pass "handleDocType" as props to Sidebar component
      <Sidebar handleDocType={this.handleDocType}/>
      // pass "documentType" state as props to DocType component
      <DocType type={this.state.documentType} />
    </div>
   )
  }
}

export default Results

Sidebar.js

class Sidebar extends Component {

  // use "docTypeHandler" to call parent "handleDocType" method 
  // that updates "documentType" state in Results component
  docTypeHandler = (doctype) => {
    this.props.handleDocType(doctype)
  }

  render() {
    return (
       <div>
         <a className="a" href="#" onClick={() => this.docTypeHandler('document')}>
           <div className="icons dokument" >
             <img src="" alt="dokument"/>
             <a className="title">dokument</a>
           </div>
        </a>
        <a className="a" href="#" onClick={() => this.docTypeHandler('pdf')}>
            <div className="icons pdf">
             <img src="" alt="pdf"/> 
             <a className="title">pdf</a>
           </div>
        </a>

      </div>
    )

  }
}

export default Sidebar

DocType.js

const DocType = (props ) =>{
     return(
        <div>
          <p id="fileType">{props.type}</p>
        </div>
     )
};