Question

我试图避免React上的事件停止传播，但它无法正常工作。

以下是我的代码片段：

{this.state.telephone && this.state.telephone.map((el, index) => 
   <div className="left contactto-100">
      <Telephone onChange={this.handlePhone} value={el} counter={index} />
      {index > 0 ? 
         <div className="left" data-pos={index} onClick={this.removePhone}>
            <Delete className="list-table-body-action-icons" width="28" height="28"/>
         </div> 
       : null}
   </div>
)}

删除是一个svg组件：

'use strict'

import React from 'react'

class Delete extends React.Component{
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <svg className={this.props.className} fill="#666" width={this.props.width} height={this.props.height} viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
               <path d="M12,14H50v2H12V14Zm28,1H38V12a2,2,0,0,0-2-2H26a2,2,0,0,0-2,2v3H22V12a4,4,0,0,1,4-4H36a4,4,0,0,1,4,4v3ZM25,20l1,32L24,52,23,20Zm12,0L39,20,38,52,36,52Zm-7,0h2V52H30V20ZM41,58H21a4.06,4.06,0,0,1-4-3.88l-3-39,2-.15,3,39A2.1,2.1,0,0,0,21,56H41a2.18,2.18,0,0,0,2-2.12l3-39,2,0.15-3,39A4.16,4.16,0,0,1,41,58Z"/>
            </svg>
        );
    }
}

Delete.defaultProps = { width: '24', height: '24', className:''}

Delete.PropTypes = {
    width: React.PropTypes.string,
    height: React.PropTypes.string,
    className: React.PropTypes.string
}

export default Delete

这里是removePhone函数：

removePhone(event){
        console.log(event.target)
        let pos = event.target.getAttribute("data-pos")
        if(pos > 0){
           this.state.telephone.splice(pos, 1)
           this.state.phoneValidator.splice(pos, 1)
           this.setState({
             telephone: this.state.telephone,
             phoneValidator: this.state.phoneValidator
           })
         }

        event.stopPropagation()
        event.nativeEvent.stopImmediatePropagation()    
    }

点击<div className="left" data-pos={index} onClick={this.removePhone}>

时

控制台显示svg，path（svg内部）以及svg区域何时出现div。

我尝试了event.stopPropagation和event.nativeEvent.stopImmediatePropagation

我将绑定设置为removePhone函数：

this.removePhone = this.removePhone.bind(this)

任何人都可以帮助我吗？

stopPropagation在React不起作用

0 个答案: