如何在另一个文件中使用onClick方法

Question

我需要按年份过滤 AssessmentCards。我做了方法。

但我需要在其他文件的 onClick 事件中调用 clickAllCards 和 clickYearCard 方法。我该怎么做？

这是我的方法代码，我正在使用 Pug.JS 渲染：

import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import messages from './messages';

import { getAssessmentsCards } from '../../functions';

import template from './index.pug';

const cardsAssessments = getAssessmentsCards();

export default class CardAssessment extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function

  constructor(props){
    super(props);
    this.state = {
      listCards: [],
      openCm: false,
    }
  }

  componentWillMount(){
    this.setState({listCards: cardsAssessments});
  }

  hover() {
    this.setState({openCm: !this.state.openCm});
  }

  clickAllCards(e){
    e.preventDefault();
    this.setState({listCards: cardsAssessments});
  }

  clickYearCard(e){
    e.preventDefault();
    var filtered = cardsAssessments.filter((data) => {
      return data.yearCard === '2018';
    });
    this.setState({listCards: filtered});
  }

  render() {

    let cm = ["card-menu"];
    if(this.state.openCm) {
      cm.push('active');
    }

    return template.call(this, {
      messages,
      FormattedMessage,
      Link,
      cm
    });
  }
}

这是我的哈巴狗文件：

.card-adjust
    div(href="" onClick="{this.clickYearCard.bind(this)}") 2018
    div(href="" onClick="{this.clickAllCards.bind(this)}") All
    Link.card.add-new(to="/add-assessment")
        span
            .add-icon
                i.ti-plus
            |
            FormattedMessage(__jsx='{...messages.addAssessment}')
    .card.card-materia(@for='data in this.state.listCards', key='{data.id}')
        .card-body(id="{data.id}")
            div(className="{cm.join(' ')}" onClick="{this.hover.bind(this)}")
                i.fas.fa-ellipsis-v
                .cm-floating
                    Link.cmf-agenda(to="/agendamento")
                        i.ti-agenda
                        |
                        FormattedMessage(__jsx='{...messages.scheduled}')
                    Link.cmf-copy(to="#")
                        i.pe-7s-copy-file
                        |  
                        FormattedMessage(__jsx='{...messages.copy}')
                    Link.cmf-trash(to="#")
                        i.ti-trash
                        | 
                        FormattedMessage(__jsx='{...messages.delete}')
            .cm-icon
                i(className='{data.icon}')
            h2.cm-title {data.disciplineAbbreviation}
            span.badge.badge-danger {data.status}
            p.cm-questions {data.questionNumber} 
                FormattedMessage(__jsx='{...messages.questions}')
            .cm-info
                Link(to="#") {data.disciplineName}
                Link(to="#") {data.year}
                Link(to="#") {data.segment}
            .cm-date
                //- i.pe-7s-refresh-2
                | {data.date}

这是我需要放置 onClick 事件的文件：

import React from 'react';
import { FormattedMessage } from 'react-intl';
import messages from './messages';

import template from './index.pug';
import '../../assets/scss/main.scss';


export default function (params = {}) {
  const { messages, FormattedMessage } = params;
  return (
    <div>
      <ul className="nav nav-tabs">
        <li className="nav-item">
          <a className="nav-link" href="#">
            <FormattedMessage {...messages.all} />
          </a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">2018</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">2017</a>
        </li>
      </ul>
      <div className="navigation-tabs display-none">
        <a>
          <i className="nt-icon ti-angle-left" />
        </a>
        1 de 3
        <a>
          <i className="nt-icon ti-angle-right" />
        </a>
      </div>
    </div>
  );
}

谢谢

Answer 1

您可以像这样将 onClick 事件的任何方法传递给任何组件：

App.js

class App extends React.Component {
    handleClick = () => alert( "Clicked" );

    render() {
        return (
            <div>
                <Child click={this.handleClick}/>
            </div>
        )
   }
}

或者如果你不需要 lifecylce 方法或者使用函数组件 "this"（这里我们不需要）：

const App = () => {
    const handleClick = () => alert( "Clicked" );

    return (
    <div>
        <Child click={handleClick}/>
    </div>
  );
}

Child.js

const Child = ( props ) => (
    <div>
        <button onClick={props.click}>Click me!</button>
    </div>
)

如何在另一个文件中使用onClick方法

how to use onClick method in another file

reactjs

react-boilerplate