여러 함수를 호출 on클릭 리액트JS

여러 함수를 호출 on클릭 리액트JS

vanilla JavaScript에서는 다음을 수행할 수 있습니다.

onclick="f1();f2()"

2개의 함수 호출에 해당하는 것은 무엇입니까?onClick리액트 JS에서요?

하나의 함수를 호출하는 것은 다음과 같습니다.

onClick={f1}

2+ 함수 호출을 다른 함수/메서드로 래핑합니다.다음은 이 아이디어의 몇 가지 변형입니다.

1) 분리 방법

var Test = React.createClass({
   onClick: function(event){
      func1();
      func2();
   },
   render: function(){
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
});

또는 ES6 클래스:

class Test extends React.Component {
   onClick(event) {
      func1();
      func2();
   }
   render() {
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
}

2) 인라인

<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>

또는 ES6 동등품:

<a href="#" onClick={() => { func1(); func2();}}>Test Link</a>

화살표 함수(ES6+) 또는 단순 이전 함수 선언을 사용할 수 있습니다.

일반 함수 선언 유형(ES6+ 아님):

<link href="#" onClick={function(event){ func1(event); func2();}}>Trigger here</link>

익명 함수 또는 화살표 함수 유형(ES6+)

<link href="#" onClick={(event) => { func1(event); func2();}}>Trigger here</link>

두 번째는 제가 아는 가장 짧은 길입니다.도움이 되길 바랍니다!

여러 함수를 on으로 호출: 임의의 요소에 대해 래퍼 함수를 만들 수 있습니다.

wrapperFunction = () => {
    //do something
    function 1();
    //do something
    function 2();
    //do something
    function 3();
}

이러한 함수는 부모 클래스의 메서드로 정의하여 래퍼 함수에서 호출할 수 있습니다.

이와 같이 onChange를 일으키는 주요 요소가 있을 수 있습니다.

<a href='#' onClick={this.wrapperFunction}>Some Link</a>

리액트 기능 컴포넌트

             <button
                onClick={() => {
                  cancelOrder();
                  handlerModal();
                }}
             >
                Cancel
             </button>

최적의 방법:

onClick={ () => { f1(); f2();} }

버튼 클릭 한 번으로 두 가지 기능을 동시에 적용해야 하는 경우 React js에서 이렇게 추가할 수 있습니다.

<button onClick={()=> {fun1(); fun2()}}>Show more</button>

간단하게 포장할 수 있습니다.[]이것은 머티리얼 UI 버튼에서도 동작합니다.

<Button onClick={(event) => [function1(), function2()]}>Click Me</Button>

샘플 코드를 보려면 클릭하십시오.

출력을 보려면 클릭하십시오.

버튼이 하나 있고 두 개의 onClick 이벤트를 실행하여 숨겨진 텍스트를 표시하고 버튼을 한 번의 클릭으로 숨긴다고 가정합니다.

let a = 'invisible'
  let b = 'visible'
  const [show, setShow] = useState(a)
  const [buttonshow, setButtonShow] = useState(b)

<button onClick={() => {setButtonShow(a); setShow(b)}}>Read More</button>
<p>This text will show after you press the button Read more and Read
more will be hidden from the DOM
</p>

보시다시피 익명 함수는 두 개의 함수를 반환했습니다.

{setButtonShow(a); setShow(b)}

//Don't do this way
function App() {
  return (
    <div>
      <button
        onClick={() => {
          console.log('hello');
          console.log('world');
        }}>
        I'm a button
      </button>
    </div>
  );
}

//Do this way
function App() {

  function fun1() {
    console.log('hello');
  }

  function fun2() {
    console.log('world');
  }

  return (
    <div>
      <button onClick={() => {fun1();fun2();}}>Click</button>
    </div>
  );
}

네스트된 것을 사용할 수 있습니다.

하나는 견인기능이 있습니다.openTab()또 하나는closeMobileMenue(), 먼저 전화하겠습니다.openTab()다른 함수를 호출합니다.closeMobileMenue().

function openTab() {
    window.open('https://play.google.com/store/apps/details?id=com.drishya');
    closeMobileMenue()   //After open new tab, Nav Menue will close.  
}

onClick={openTab}

언급URL : https://stackoverflow.com/questions/26069238/call-multiple-functions-onclick-reactjs