Question

I'm passing a method as props to a component. And using onClick Event to fire the method. But I get no responds and error.

首先，我将方法作为道具从我的App组件传递给RecipeList组件，然后从那里作为道具将其作为道具传递给Recipe组件，然后使用.bind（）通过onClick事件触发方法。按钮。但这不起作用。

//// This is the component (RecipeList) I'm passing my method from the app to the recipe component

const RecipeList = (props) => {
    let mappedRecipes = [];
    mappedRecipes = props.recipes.map((recipe)=>{
        return (
            <Col key={recipe.recipe_id} xs={12} md={12} lg={4} sm={12}>
                <RecipeCard data = {recipe} detailHander = {props.detailHander} />
            </Col>
        )
    })
    return(
        <Wrapper>
            <Title>Top Popular Recipes</Title>
            <Container>
                <Row className="justify-content-md-center">
                    {mappedRecipes}
                </Row>
            </Container>
        </Wrapper>
    )
}

export default RecipeList;




///This is the component recipe where i'm firing the method

const Recipe = (props) => {    
    const {data, detailHander} = props;
    // console.log(detailHander);
    return(
        <Wrapper fluid>
            <Row>
                <Col>
                    <Image src = {data.image_url}  />
                    <Body>
                            <Title>{data.title}</Title>
                            <Publisher>Published by {data.publisher}</Publisher>
                    </Body>
                    <Footer fluid>
                        <Row>
                            <Col md={12}>
                                {/* <Link green href={data.source_url}></Link> */}
                                <Button  onClick={detailHander.bind(1,246454)}  green>Details</Button>
                                <Link href={data.source_url} target="_blank">Recipe Url</Link>
                            </Col>
                        </Row>
                    </Footer>
                </Col>
            </Row>
        </Wrapper>
    )
}`enter code here`

export default Recipe;

onclick事件未触发道具方法

0 个答案: