如何通过 React 组件传递函数

Question

我有一个 React<App>组件，其中包含以下结构：

{/*
INSIDE <APP>
<BreadCrumb>
<Chip/>
<Chip/>
<Chip/>
...
<BreadCrumb/>
<CardContainer>
<Card/>  // just a clickable image 
<Card/>
<Card/>
...
<Button/>
<CardContainer/>
*/}

我需要单击<Card>才能激活<Button>功能，并且此功能应将<App>的状态更改为"激活"我的意思是，当我单击<Card>时，<Button>变得可单击。

我有一些问题来理解如何将父母的功能传递给孩子，并从孩子内部设置父母的状态。 这是我的应用程序组件

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})/>
}

这是按钮

class Button extends React.Component {
render() {
return(
<button   
onClick = {() => this.props.onClick()}
className="button">
Continua
</button>
);
}
}

当我单击按钮时，我收到此错误

类型错误： 无法读取未定义的属性"活动索引">

Answer 1

使用 "Card" 组件的属性来传递回调函数：

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