버튼의 클릭 가능한 영역

지금 포트폴리오를 업데이트하고 있습니다. click .

확인해보니 각 버튼의 구조나 태그가 같지 않고 일부 영역을 클릭할 수 없다고 합니다.

시각적으로 버튼은 패딩과 테두리가 사용되거나 styled-component를 사용하는 경우 이름이 지정될 때<Button> 버튼과 정확히 동일하게 보입니다.

이것은 매우 기초적이지만 React에서 클릭 가능한 버튼을 코딩하는 방법을 공유하겠습니다.

버튼에는 두 가지 종류가 있습니다. 하나는 "무언가를 추가할 때까지 자체적으로 아무 작업도 수행하지 않는 버튼"이고 다른 하나는 기본적으로 양식을 제출하는 양식 태그의 제출 버튼입니다. 버튼에 링크 기능을 추가하고 싶었기 때문에 이 유형의 버튼으로 시작합니다.

링크가 있는 버튼

여기에 잘못된 코드가 있습니다.

        <div>
          <a href="#">
            <div>Click</div>
          </a>
        </div>

<div> 안에 <button> 대신 <a> 를 사용하고 있습니다. 이것은 괜찮아 보인다.



초록색 부분은 제가 추가한 패딩입니다.



앵커 부분입니다.



단, 이 하늘색 부분만 클릭이 가능합니다. 주변의 흰색 부분을 클릭해도 아무 일도 일어나지 않습니다.

다음은 올바른 코드입니다.

        <div className="button">
          <a href="#">
            <button className="label">Click</button>
          </a>
        </div>

먼저 이렇게 생겼습니다.



따라서 "버튼"(css)에서 패딩을 삭제하고 "레이블"에 padding , border: none 및 cursor: pointer 를 추가합니다.

이제 이렇게 보입니다.





녹색 패딩 부분이 이제 <button> 이므로 전체 영역을 클릭할 수 있습니다.

따라서 간단히 말해서 Wrap <button> with <a> .
<a>를 <Link>(react-router-dom)로 바꿀 수 있으며 잘 작동합니다.

양식의 버튼

      <form>
        <button type="submit">
          Submit
        </button>
      </form>

<button>에 약간의 스타일을 추가하기만 하면 전체 영역을 클릭할 수 있습니다.

요약은 다음과 같습니다.

두 종류의 버튼이 있습니다. "단지"버튼과 양식의 버튼입니다.

버튼에 링크를 추가할 때 <button>를 <a>로 래핑합니다.

<form> 에서 <button> 와 <form> 와 같이 <form onSubmit={handleSubmit}> 에 원하는 기능을 추가하십시오.