이 문서에서는 상태를 결합하여 공식을 조작합니다.

의도한 결과

이것은 기사가 끝날 때까지 우리가 갖게 될 것입니다.

그림 1: React로 만든 빠르고 간단한 양식.

그림 2: 앱의 계층 구조 차트. 점선이 있는 상자는 구성 요소가 아니라 App.jsx 내부의 태그입니다.

시작하기

우리의 코드 예제는 점점 더 복잡해지고 있지만 여전히 새로운 것에 집중함으로써 이를 분석할 수 있습니다.

The form tag

The input tag

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");

  function onSuscribe(event) {
    event.preventDefault();
    alert(`Welcome on board ${name}`);
  }

  function onName(event) {
    setName(event.target.value);
  }

  return (
    <div className="App">
      <h1>Our new customer is {name}</h1>

      <form onSubmit={onSuscribe}>
        <input value={name} onChange={(event) => onName(event)} />
        <br />
        <button>Suscribe</button>
      </form>
    </div>
  );
}

양식 태그:

제출을 트리거하는 코드는 버튼 대신 양식에 첨부됩니다.

onSubmit 사용자가 양식 버튼을 누를 때 기능을 실행하는 양식 태그의 속성입니다.

event.preventDefault() 함수의 onSuscribe. 이 줄은 양식을 보낸 후 웹 페이지가 자동으로 다시 로드되는 것을 방지하는 데 필요합니다.

JavaScript가 강력한 언어가 되기 전에 기본 양식 조작을 수행하기 위해 서버측 언어가 필요할 때 페이지를 다시 로드하는 것은 정상적인 동작이었습니다.

이벤트를 변경하는 상태에 폼이 직접 연결되어 있지 않기 때문에 화살표 기능을 생략하여 입력란에서와 같이 이벤트를 전달할 수 있습니다.

입력 태그:

입력에 상태를 수신하는 속성value이 있습니다.

또한 입력에는 사용자가 필드 내부에 입력할 때마다 화살표 기능을 실행하는 속성onChange이 있습니다.

화살표 기능에는 2events가 있습니다.

사용자가 입력할 때마다 입력 이벤트가 발생합니다.

동일한 이벤트가 함수에서 사용할 인수로 전달되었습니다.

결론

이제 우리는 React에서 반쯤 끝났습니다. 다음날 우리는 서버에서 데이터를 가져오고 React 프로젝트 내에서 여러 페이지를 처리하여 대규모 애플리케이션 구축을 시작할 것입니다.

다음날 예정된 기사로 이동하거나 공부를 계속하기 전에 휴식을 취할 수 있습니다.

완성된 코드를 보고 싶다면 이 파일link을 열고 분기 양식을 엽니다.

학점:

표지: Photo by Kelly Sikkema on Unsplash