href 및 onClick in ReactJS

href 및 onClick in ReactJS

Reactjs.org에 따라 이벤트를 처리하고 아래 코드 기본 사용을 방지합니다.

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

단, 다음과 같이 컨스트럭터에 바인딩을 추가해야 합니다.

this.handleClick = this.handleClick.bind(this);

아래 코드로 원하는 동작을 얻을 수 있었습니다.

<span>
  <a href="#" onClick={()=>doSomething(arg1,agr2)}>Click here</a>
</span>

질문:어떤 것이 더 나은 선택입니까?첫 번째 옵션은 상태 저장 구성 요소를 사용해야 하며 두 번째 옵션은 상태 저장 구성 요소 또는 상태 비저장 구성 요소에 관계없이 작업을 수행할 수 있습니다.

두 옵션 모두 거의 동일한 결과를 생성합니다.ActionLink는 스테이트리스 컴포넌트이므로handleClick재작성되어onClick재할당했습니다.최상의 성능을 얻고 싶다면 다음과 같은 클래스를 사용할 수 있습니다.

class ActionLink extends React.Component () {
  handleClick = (e) => {
    e.preventDefault();
    console.log('The link was clicked.');
  };

  render() {
    return (
      <a href="#" onClick={this.handleClick}>
        Click me
      </a>
    );
  }
}

이 예에서는,그handleClick는 1회만 바인드되며 렌더 메서드만 실행됩니다.또, 를 바인드 할 수도 있습니다.handleClick를 참조하십시오.하지만 차이가 너무 작기 때문에 원하는 것을 사용하면 더 명확해질 것입니다.

페이지 로드 시 반복되는 함수 호출을 수정하는 가장 좋은 방법은

<a href="#" onClick={() => {this.handleClick}}>click me</a>

내 경우, 만약 내가href="#"어쨌든 리다이렉트 중이었기 때문에 링크/버튼을 다음과 같이 남겨두었습니다.

<a href="" role="button" onClick={this.myAction}>Click here</a>

두 번째 스니펫 모두 약간의 성능 문제가 있습니다.렌더링할 때마다<a>의 함수에 태그를 붙이다onClick재할당됩니다.

여기 모든 결합 방법을 설명하는 자세한 게시물이 있습니다.this반응해서(https://medium.com/@housecor/syslog-binding-5-accesses-for-handling-this-92c651b5af56#.53op90a6w)

---

편집했습니다. 예제 코드를 잘못 이해했습니다. 각 렌더링에 함수를 할당하는 문제가 인라인 화살표 함수 스니펫과 동일합니다.빈센트 다무어의 수락된 답변을 참조합니다.

현재 오브젝트로 바인드하는 것이 좋을 것 같습니다.시험해 보겠습니다.다음의 예를 참조해 주세요.

<a href="#" onClick={this.handleclick.bind(this)}>click me</a>

이 코드를 사용하면 경고가 생성됩니다.

<a href="#" onClick={() => action()}>Link</a>

이 문제를 회피하려면 cli의 어드바이스에 따라 대처해야 합니다.즉, HTTP: etc에서 유효한 링크주소를 지정할 수 없는 경우 태그를 버튼으로 변경합니다.순수 CSS를 사용하여 버튼을 링크처럼 만들 수 있습니다.다음은 예를 제시하겠습니다.

1단계 단추 스타일 생성

const buttonToLink = {
        fontSize: '1em',
        textAlign: 'left',
        color: 'blue',
        background: 'none',
        margin: 0,
        padding: 0,
        border: 'none',
        cursor: 'pointer'
     
    }

2단계 버튼에 스타일을 추가합니다.

<button style={buttonToLink} onClick={() => action()}> This link has no warning</button>

"action()"은 버튼에 따라가는 함수입니다.

언급URL : https://stackoverflow.com/questions/42962603/href-with-onclick-in-reactjs