1

我将React 组件作为道具传递给孩子。该组件有一个事件。在子组件中，我想访问该事件并将其绑定到子组件中的方法。我怎样才能做到这一点 ？

我经常使用Semantic-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>
        )
    }
}

如何访问 trigger prop 组件并将其 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
}
4

2 回答 2

1

这里的关键是克隆元素

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

    this.Trigger = React.cloneElement(
        this.props.trigger,
        { onClick: this.functionToCall }
    )   
}
于 2018-07-02T07:28:21.067 回答
0

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

父组件：

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

在子组件中：

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

作为道具传递this.handleOpen并在子组件中将其作为道具调用，它将触发父组件中的功能，您可以在其中处理您想要的数据。

这是你要求的吗？

于 2018-06-29T12:17:28.997 回答