react onclick 데이터 값 return null

Question

클릭 한 결과 <Icon />에 따라 상태 정렬을 left, center, right 또는 justify로 변경하려고합니다. 그러나 e.target.getAttribute('data-value')은 null을 반환합니다.

<Icon icon="align-left" />을 left으로 변경하면 작동합니다. e.target.getAttribute('data-value')이 (가) 데이터 값을 반환합니다.

내 상태를 왼쪽, 오른쪽 가운데로 변경하거나 <Icon /> 클릭시 정당화하려면 어떻게해야합니까?

class TextStyleParams extends React.Component { 
    constructor(props) { 
    super(props); 
    this.onClickAlignement = this.onClickAlignement.bind(this); 

    this.state = { 
     textStyle: { 
     alignement: 'left', 
     ..., 
     }, 
    }; 
    } 

    onClickAlignement(e) { 
    const { textStyle } = this.state; 
    const newTextStyle = { 
     ...textStyle, 
     alignement: e.target.getAttribute('data-value'), 
    }; 
    this.setState({ textStyle: newTextStyle }); 
    this.props.updateTextStyle(newTextStyle); 
    } 

    render() { 
    const { textStyle } = this.state; 

    return (
     <div> 
     <span role="button" onClick={this.onClickAlignement} data-value="left"><Icon icon="align-left" /></span> 
     <span role="button" onClick={this.onClickAlignement} data-value="center"><Icon icon="align-center" /></span> 
     <span role="button" onClick={this.onClickAlignement} data-value="right"><Icon icon="align-right" /></span> 
     <span role="button" onClick={this.onClickAlignement} data-value="justify"><Icon icon="align-justify" /></span> 
     </div> 
    ); 
    } 
} 

class Icon extends React.Component { 
    render() { 
    const { icon } = this.props; 
    return (
     <svg viewBox="0 0 24 24" styleName="icon" className={`icon-${icon}`}> 
     <use xlinkHref={`iconset.svg#${icon}`} /> 
     </svg> 
    ); 
    } 
} 

Answer 1

e.currentTarget.getAttribute('data-value')을 사용해보세요. target 속성은 이벤트가 발생한 dom 요소 (svg 요소)를 참조하는 반면 currentTarget은 핸들러가 연결된 요소를 참조합니다.

Answer 2

내 수업 아이콘에 pointer-events: none 추가가 작동합니다. <svg />이 (가) 클릭시 이벤트를 삼키는 것으로 보입니다.