Question

我将反应成分作为道具传递给孩子。该组件有一个事件。在子组件中，我想访问该事件并将其绑定到子组件内的方法，该怎么办？

我经常使用语义ui react Modal如下

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalOpen: false
        }
    }    

    handleOpen = () => this.setState({ modalOpen: true })

    handleClose = () => this.setState({ modalOpen: false })

    render(){
        return(
            <Modal 
                onClose={this.handleClose}
                open={this.state.modalOpen}
                trigger={<Button onClick={this.handleOpen}>Gandalf</Button>}>
                <Modal.Header>Balrog</Modal.Header>
                <Modal.Content>
                    <h1>You shall not pass!</h1>
                    {/* 
                    Some form that closes Modal on success
                    onSuccess : this.handleClose 
                    */}
                    <Button onClick={this.handleClose}>Grrrrr</Button>
                </Modal.Content>
            </Modal>
        )
    }
}

export default Example

现在我想使其可重用

import React, { Component } from 'react'
import { Modal } from 'semantic-ui-react'

class ReusableModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalOpen: false
        }
    }    

    handleOpen = () => this.setState({ modalOpen: true })

    handleClose = () => this.setState({ modalOpen: false })

    render(){
        return(
            <Modal 
                onClose={() => this.handleClose}
                open={this.state.modalOpen}
                {/* 
                    How to access onClick event on trigger prop content ?  
                    this.prop.trigger can be a Button or a Menu.Item
                */}
                {...this.props}>
                {this.props.children}
            </Modal>
        )
    }
}

我如何访问触发器道具Component并将其onClick事件绑定到handleOpen方法？

编辑：

更确切地说，这就是我正在寻找的

<ChildComponent trigger={<Button>This button should fire a function defined in child component</Button>} />


ChildComponent extends Component {
    functionToCall = () => { console.log('hello') }
    // I would like to :
    // let myButton = this.props.trigger
    // myButton.onClick = functionToCall
}

Answer 1

在React中，数据从父级流到子级。如果有多个子组件具有需要触发父组件更改的事件，则必须在子组件中触发回调函数。

父组件：

handleOpen = () => { // do something }
(...)
<childComponent onClickCallback={this.handleOpen}

在子组件中：

<button onClick={this.props.onClickCallback}> Click to close</button>

将this.handleOpen作为prop传递，并将其作为子组件中的prop调用，它将触发父组件中的函数，您可以在其中处理所需的数据。

这是您要的吗？

Answer 2

这里的关键是克隆元素

ChildComponent extends Component {
    functionToCall = () => { console.log('hello') }

    this.Trigger = React.cloneElement(
        this.props.trigger,
        { onClick: this.functionToCall }
    )   
}

作为prop传递的组件的访问事件

2 个答案: