onClick 事件绑定（不是按钮）

Question

I have a small React app that makes calls to a JSON file and returns the text of a card.

I have successfully made this work by calling the onClick on a button, but what I really want to do is add a onClick as an event to my Cards module I've created. I've looked at binding at this level but with no success;

<Cards name={card} onClick={() => setCard(Math.floor(Math.random() * 57) + 1)}/>

Do I need to write a custom handler in my cards.js to handle the onClick? Or can I append it within this file (App.js)?

The full code is below.

import React, { useState } from 'react';
import './App.css';
import Cards from '../cards';

function App() {
  const [card, setCard] = useState('1');

  return (
    <div className="wrapper">
      <h1>Card text:</h1>
      <button onClick={() => setCard(Math.floor(Math.random() * 57) + 1)}>Nile</button>
      <Cards name={card} />
    </div>
  );
}

export default App;

My card.js component code is;

export default function Cards({ name }) {
  const [cardInformation, setCards] = useState({});
  
  useEffect(() => {
    getCards(name)
    .then(data =>
      setCards(data)
    );
  }, [name])
  
  const FlippyOnHover = ({ flipDirection = 'vertical' }) => (
    <Flippy flipOnHover={true} flipDirection={flipDirection}>
    </Flippy>
  );

  return(
    <div>
      <Flippy flipOnHover={false} flipOnClick={true} flipDirection="vertical" style={{ width: '200px', height: '200px' }} >
    <FrontSide style={{backgroundColor: '#41669d',}}>
    </FrontSide>
    <BackSide style={{ backgroundColor: '#175852'}}>
      {cardInformation.continent}
    </BackSide>
  </Flippy>
      <h2>Card text</h2>
      <ul>
        <li>{cardInformation.continent}</li>
      </ul>
    </div>
  )
}

Cards.propTypes = {
 name: PropTypes.string.isRequired
}

Answer 1

We can create an event. So let's call it onSetCard .

App.js file:

class App extends Component {
     handleSetCard= () => {
        // set state of card here
     };

     <Cards name={card}
      card=card
      onSetCard={this.handleSetCard} 
     />
}

Cards.js file:

class Cards extends Component {
    render() {
        console.log("Cards props", this.props);  
        return (
            <button
                onClick={() => this.props.onSetCard(this.props.card)}
                className="btn btn-secondary btn-sm m-2"
             >
            FooButton
            </button>

        )
    }
}