Как исправить: Как показать состояние с помощью onClick для div? (React)

Question

У меня есть боковая панель с типами документов (документы, таблицы, слайдер, HTML ..).Я хочу, чтобы, если я нажму на элемент docs, он покажет документы в другом div как заголовок.

У меня есть 3 файла: DocumentType.tsx, Sidebar.tsx и Results.tsx

InDocumentType.tsx:

import React from 'react';

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

export default documentType;

В 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>
  )
}

И в Results.tsx:

...

<DocumentType />

..

Answer 1

Вы хотите отобразить тип документа в компоненте Results при нажатии на документ в компоненте Sidebar.

У вас есть состояние documentType в компоненте Sidebar, и вы хотите передать его компоненту Results.Таким образом, для этого вы можете сделать компонент Results дочерним компонентом компонента Sidebar и передать выбранный тип документа, например, состояние documentType как реквизиты.

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;

ОБНОВЛЕНИЕ

Если компоненты Sidebar и DocType являются дочерними компонентамиResults компонент, затем добавьте documentType состояние к Results компоненту и передайте documentType состояние как реквизиты для DocType компонента.

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

Answer 2

Если я правильно понял ваш вопрос .. вы хотели показать данные в div, когда срабатывает событие onClick ..

Допустим, ваш объект состояния имеет

state = {
data: ''
}

// clicked function

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

элемент div: <div onClick={this.clicked} >{this.state.data}</div>

простой пример, когда onClick происходит событие div и отображается состояние data object ..