Javascript 如何通过React组件传递函数

我有一个React

组件，在这个结构中：

{/*
在…内
...
//只是一个可点击的图像
...
*/}

我需要点击

来激活

功能，此功能应将

的状态更改为“激活”，我的意思是当我点击

时，

变为可点击

我有一些问题需要理解如何将函数父函数传递给子函数，以及如何从子函数内部设置父函数的状态。 这是我的应用程序组件

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
活动索引：1
}
}
submitChoice（）{
this.setState（{activeIndex:this.state.activeIndex++}）；
}
}
render（）{
返回(
}

这是按钮

class Button extends React.Component {

    render() {
        return(

            <button   

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

                Continua

            </button>
        );
    }
}

class按钮扩展React.Component{
render（）{
返回(
this.props.onClick（）}
className=“button”>
连续体
);
}
}

当我点击按钮时，我收到了这个错误

TypeError:无法读取未定义的属性“activeIndex”

使用“卡”组件的属性传递回调函数：

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

const Card=（{onClick，id}）=>{
常量触发器单击=（）=>{
onClick（id）；
};
返回(
点击卡片
);
};
常量应用=（）=>{
const cardClicked=id=>{
log（`Card with id${id}被点击`）；
//在此处修改应用程序状态
};
返回(
);
}

它们传递的变量完全相同，例如

您可以将函数作为属性传递给子级。因此，您可以这样做：

，其中enableButton是在当前范围内定义的函数（例如：

enableButton=（）=>setState（{buttonEnabled:true}）

）在上面的示例中，您还可以看到如何根据单击的卡使用不同的参数调用回调函数，但是如果您不需要它，您可以通过在卡组件中简单地返回

卡内容

来简化回调函数。