Question

我的工具条上带有文档类型（文档，表格，滑块，html ..）。我想要，如果我单击docs元素，它将在另一个div中显示文档，例如标题。

我有3个文件：DocumentType.tsx，Sidebar.tsx和Results.tsx

在DocumentType.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

如果我正确理解了您的问题..您希望在onClick事件触发时在div中显示数据。

让我们说您的状态对象具有

state = {
data: ''
}

//单击功能

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

div元素：<div onClick={this.clicked} >{this.state.data}</div>

发生onClick事件div并显示状态data对象时的简单示例。

Answer 2

当您单击Results组件中的文档时，要在Sidebar组件中显示文档类型。

您在documentType组件中具有Sidebar状态，并且想要将其传递给Results组件。因此，您可以将Results组件作为Sidebar组件的子组件，并传递选定的文档类型，即将documentType状态作为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;

更新

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

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

2 个答案: