反应:将事件侦听器添加到没有包装器 html 标记的道具中

React: Add Event Listener to props without wrapper html tag

本文关键字：html 包装 事件 侦听器 添加 反应      更新时间：2023-09-26

我想在没有包装器 HTML 标记的情况下将事件onMouseEnter添加到组件属性中。

var tooltipText = this.props.children;
<span onMouseEnter={this.renderTooltip}>{tooltipText}</span>

是否可以将此事件添加到this.props.children，因为我负担不起包装器跨度。

以下是所有组件代码：

class FastTooltip extends Component{
    constructor(props){
        super(props);
        this.renderTooltip = this.renderTooltip.bind(this);
        this.state = {
            tooltip: false,
        }; 
    }
    renderTooltip(){
        this.setState({ tooltip: true });
    }
    render(){
        var renderTooltip;
        var { overlay, placement } = this.props;
        var tooltipText = this.props.children;
        if( this.state.tooltip ){
            renderTooltip = <OverlayTrigger placement={placement} overlay={<Tooltip>{overlay}</Tooltip>}>
                                {tooltipText}
                            </OverlayTrigger>
        } else {
            renderTooltip = <span onMouseEnter={this.renderTooltip}>{tooltipText}</span>
        }
        return renderTooltip;
    }
}

如果我理解正确，您可以映射组件的子级并使用事件处理程序返回一个新元素。这样的事情能让你走上正轨吗？

class FastTooltip extends Component {
    render() {
        return React.Children.map(this.props.children, (child) => {
            return React.cloneElement(child, {
                onMouseEnter: () => { console.log('onMouseEnter'); }
            })
        });
    }
}
相关文章：