Question

我在这个结构中有一个React <App>组件：

{/*

INSIDE <APP>

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

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

 */}

我需要点击<Card>才能激活<Button>功能，并且此功能应将<App>的状态更改为“激活”，我的意思是当我点击{{ 1}} <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})/>
                }

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

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

Answer 1

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

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

如何通过React组件传递功能

1 个答案: