如何通过 React 组件传递函数

Question

I have a React <App> component with inside this structure:

{/*

INSIDE <APP>

        <BreadCrumb>
                <Chip/>
                <Chip/>
                <Chip/>
                    ...
         <BreadCrumb/>

        <CardContainer>
                <Card/>  // just a clickable image 
                <Card/>
                <Card/>
                    ...
                <Button/>
        <CardContainer/>

 */}

I need a click on <Card> to activate a <Button> function, and this function should change the state of <App> as "activate" I mean that when I click on a <Card> the <Button> becomes clickable.

I have some problems to understand how pass function parents to children and set the state of a parent from inside a child. this is my App component

class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      activeIndex: 1
    }

  }
    submitChoice() {   
      this.setState({activeIndex : this.state.activeIndex ++});    
    }
 }

       render() {
            return (
                 <Button onClick = {this.submitChoice})/>
                }

and this is the Button

class Button extends React.Component {

    render() {
        return(

            <button   

                onClick = {() => this.props.onClick()}
                className="button">

                Continua

            </button>
        );
    }
}

when i click on the button i receve this error

TypeError: Cannot read property 'activeIndex' of undefined

Answer 1

Use a property of the "Card" component to pass your callback function:

const Card = ({ onClick, id }) => {
  const triggerClick = () => {
    onClick(id);
  };

  return (
    <div onClick={triggerClick}>Click the card</div>
  );
};

const App = () => {
 const cardClicked = id => {
   console.log(`Card with id ${id} was clicked`);
   //Modify App state here
 };

 return (
   <CardContainer>
     <Card onClick={cardClicked} id="card-1"/>
     <Card onClick={cardClicked} id="card-2"/>
   </CardContainer>
  );
}