如何在 React 的无状态组件上使用 onClick？

Question

我想在无状态组件上使用 onClick 但它拒绝这样的错误： onClick侦听器是一个函数，而不是获得了object类型的值。

我需要在单击时显示和隐藏组件。 例如，当我单击<ResultCard/>组件时，我想隐藏他并显示<ResultDetail/>

状态反应组件：

import React, { Component } from "react";
import ResultCard from "./ResultCard";
import "../../assets/css/Result.css";
import Spinner from "../Spinner";
import { getApiToken, getParisByPrice } from "../../services/api";
import Modal from "../Modal";
import "../../assets/css/BudgetEntry.css";
import modify from "../../assets/images/modify.png";
import ResultDetail from "./ResultDetail";

class Results extends Component {
  state = { 
    priceValue: "",
    showResult: true
  };

  showResultDetail = () => {

    this.setState({ showResult: false });
  };

  closeResultDetails = () => {

    this.setState({ showResult: true });
  };



  render() {
    return (
      <div className="results-container">


        {this.state.loading ? (
          <Spinner />
        ) : (
          <div className={"row"}>
            {this.state.showResult ? 
            (
              this.state.paris.map(details => (
                <ResultCard
                  key={details.id}
                  id={details.id}
                  showResultDetail={this.showResultDetail}
                  prefix={details.prefix}
                  costPerDay={details.average_cost_per_day}
                  logoSports={details.infrastructure.map(home =>
                    home.logo_path.map(path_image => (
                      <img
                        src={path_image}
                        alt="icon-sports"
                        style={{ width: 20 }}
                        key={path_image}
                      />
                    ))
                  )}
                />
              ))
            ) 
              : 
            (
              <ResultDetail closeResultDetail={this.closeResultDetails}/>
            )
            }
          </div>
        )}
      </div>
    );
  }
}

export default Results;

ResultCard（无状态组件）：

import React from 'react';
import '../../assets/css/ResultCard.css';

const ResultCard = ({prefix, costPerDay, logoSports, showResultDetail, id}) => {

  return (
    <div className="card" onClick={showResultDetail} id={id}>
      <p style={{margin:5}}>{prefix}</p>
      <p style={{margin:1}}>arrondissement</p>
      <p>{costPerDay} $</p>
      {logoSports}
    </div>
  )


};

export default ResultCard;

ResultDetail（无状态组件）：

import React from 'react';

const ResultDetail = (closeResultDetail) => (

      <div onClick={closeResultDetail}>
        <p>Result detail</p>
      </div>
) 


export default ResultDetail;

感谢您的帮助

Answer 1

问题在这里

const ResultDetail = (closeResultDetail) => (

您需要像这样从props对象中解构它：

const ResultDetail = ({closeResultDetail}) => (

或者像这样直接从 props 使用它：

const ResultDetail = (props) => (
 <div onClick={props.closeResultDetail}>
...

Answer 2

在您定义的Results

showResultDetail = () => {
    this.setState( {showResult: false });
};

作为没有参数的函数。 然后你通过

showResultDetail={(e) => this.showResultDetail(e)}

作为一个带有事件参数的函数给你的ResultCard 。 如果你把它改成

showResultDetail={this.showResultDetail}

您的问题可能已经解决。

编辑：我认为这是一个最小的片段，可以满足您的要求。

 const ResultCard = ({showResultDetail, show}) => { return <div className="card" onClick={showResultDetail}>{show?'Click me!':''}</div> }; class Results extends React.Component { state = { priceValue: "", showResult: true }; showResultDetail = () => { this.setState({ showResult: false }); }; render() { return <ResultCard show={this.state.showResult} showResultDetail={this.showResultDetail}/> } } ReactDOM.render(<Results/>, document.getElementById('root'))

 .card { width: 200px; height: 50px; background: lightgray; text-align: center; line-height: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <div id='root'></div>

Answer 3

在您的状态组件中

  showResultDetail = () => {

    this.setState({ showResult: false });
  };

   render() {

        ....
        <ResultCard 
        ....
        show={this.state.showResult}
         //defer the execution of the method
        onClick={(e) => this.showResultDetail(e)}/> 


    }

结果卡片.js

const ResultCard = ({prefix, costPerDay, logoSports, showResultDetail, id, show}) => {

  if(show) 
     return (
    <div className="card" onClick={showResultDetail} id={id}>
      <p style={{margin:5}}>{prefix}</p>
      <p style={{margin:1}}>arrondissement</p>
      <p>{costPerDay} $</p>
      {logoSports}
    </div>
  );


};