2017-10-05 2 views
0

일부 버튼에는 npm 반응 아이콘이 사용됩니다.React 아이콘 클릭 이벤트

아쉽게도 아이콘은 onClick 속성이 작동하는 것을 중지합니다. 모퉁이의 아이콘을 벗어난 버튼을 클릭하면 잘 동작합니다.

소품으로 onClick 기능을 전달하고 반응 아이콘 코드로 이동하여 onClick을 추가하는 것을 포함하지 않는 간단한 해결책이 있는지 궁금합니다. 내가 추측이 시도해야

모듈의 코드는

import React from 'react' 
    import Icon from 'react-icon-base' 

    const FaArrowUp = props => (
     <Icon viewBox="0 0 40 40" {...props}> 
      <g><path d="m37.5 21.7q0 1.1-0.9 2l-1.6 1.7q-0.9 0.8-2.1 0.8-1.2 0-2-0.8l-6.5-6.6v15.7q0 1.2-0.9 1.9t-2 0.7h-2.9q-1.1 0-2-0.7t-0.8-1.9v-15.7l-6.6 6.6q-0.8 0.8-2 0.8t-2-0.8l-1.7-1.7q-0.8-0.9-0.8-2 0-1.2 0.8-2.1l14.6-14.5q0.7-0.8 2-0.8 1.2 0 2 0.8l14.5 14.5q0.9 0.9 0.9 2.1z"/></g> 
     </Icon> 
    ) 

    export default FaArrowUp 

내가 아이콘이 GitHub의에 체크 패키지 후

<button name='up' onClick={this.move}> <FaArrowUp /> </button> 
+0

span 및 div에 아이콘 구성 요소를 래핑하려고 시도했지만 span 및 div에'name' 및'onClick' 속성을 지정하지 않았으며 하나는 일했다. – jaimefps

+0

코드가 작동해야합니다! 어쩌면, 당신은 앵커 태그에 포장하려고 시도해야합니다 - vijayst

답변

0

을 가지고 가져올 방법을 렌더링의 나입니다 :

<button name='up' onClick={this.move}> <FaArrowUp onClick={() => this.move}> /> </button> 
+0

작동하지 않았습니다. :(나는 name 애트리뷰트도 추가하려고 시도했다. 둘 다 익명 함수로 래핑되지 않고 래핑되지도 않았다. – jaimefps