댓글 검색 목록

[Reactjs] 입력을 기반으로 경고 표시 - challenge 4

페이지 정보

작성자 운영자 작성일 19-08-02 11:22 조회 520 댓글 0

이벤트는 JavaScript에서 폼 입력을 듣거나 이벤트를 스크롤하여 버튼 클릭에 이르기까지 상호 작용의 핵심을 만듭니다.

JavaScript에서 이벤트를 처리하는 방법에 대한 지식은 필수적입니다.

CodePen Final : https://codesandbox.io/s/n15z4oq24l 코드 페인 스타터 : https://codesandbox.io/s/5wz2onjn4

이 React 도전 과제에서는 이벤트 발생 후 DOM 액션을 수행합니다. 이 이벤트는 React의 입력 요소에 기본으로 발생하며 onChange 양식 입력 이벤트를 수신합니다.

이벤트는 React와 JavaScript에 매우 중요합니다.

과제 : 타이핑 할 때 경고 표시

이 과제에서는 입력 데이터를 받고 특정 단어를 입력 할 때 창에 경고하는 양식을 만듭니다.

이 과제의 주요 과제는 다음과 같습니다.

양식 데이터를 state에 저장하십시오.
특정 단어가 양식에 입력되면 경고를 표시합니다.

시동 코드

시작하려면 CodeSandbox를 시작하십시오. https://codesandbox.io/s/5wz2onjn4

Embed: https://codesandbox.io/s/5wz2onjn4

styles.css의 샌드 박스 스타일이 제공됩니다.

마지막 페이지는 다음과 같습니다.

tbrm3qktljolptxvykh3.mp4

힌트

React에서 제어되는 구성 요소, 작동 방식 및 데이터가 전달되는 방식을 살펴보십시오.

시작하려면 이 CodeSandbox를 포크하십시오. https://codesandbox.io/s/5wz2onjn4

해결책 : 타이핑 할 때 경고 표시

React의 제어 된 구성 요소는 상태 변수에 의해 결정되는 해당 값을 가집니다. 또한 이 구성 요소는 할당 된 상태 변수의 값을 설정하는 데 사용됩니다.

<input> 요소는 이러한 요소 중 하나이며 state에 저장된 데이터에서 값을 받으며 state에있는 이 동일한 데이터의 값을 변경하여 상태 변수를 단일 진리의 소스로 만듭니다.

이 과제는 3 단계로 해결됩니다.

입력 데이터를 state에 저장하십시오.
폼에 대한 입력을 처리합니다.
특정 입력에 대한 경고 표시.

양식 데이터를 State에 저장하십시오.

입력 요소의 데이터는 어딘가에 저장해야 구성 요소에서 사용됩니다. 이 데이터는 상태로 저장됩니다. 다음을 사용하여 useState 반응 훅을 구성 요소로 가져옵니다.

import React, { useState } from 'react';

빈 문자열을 기본값으로 사용하여 구성 요소에 새 상태 변수 phrase를 만듭니다.

import // ...

function App(){
    const [phrase, setPhrase] = useState('');

    return (
    // Return JSX
    )
}

양식 입력 처리

상태에 입력 데이터가 있는 동안 setPhrase 메서드를 사용하여 데이터가 변경되면 <input> 요소의 값을 phrase 및 update phrase로 설정할 수 있습니다.

값을 설정하고 onChange 핸들을 다음과 같이 사용합니다.

import // ...

function App() {
  const [phrase, setPhrase] = useState('');

  return (
    <div className="App">
      <h2>What's the secret phrase?</h2>

      <input
        type="text"
        value={phrase}
        onChange={e => setPhrase(e.target.value)}
        placeholder="Super duper secret"
      />

      <p>
        Hint: It's <strong>open sesame</strong>
      </p>
    </div>
  );
}

이를 통해 양식 입력을 업데이트하면 구문 값이 업데이트 됩니다.

문구의 가치를 확인하고 특정 문자를 입력 할 때 경고를 던지려면 어떻게 해야 합니까?

특정 입력에 대한 경고 표시

이는 phrase의 값을 평가하고 특정 일치가 이루어질 때 경고를 throw하는 간단한 IF 문을 사용하여 수행됩니다.

App() 구성 요소에서 open sesame phrase 값과 일치하는 If 문을 작성하고 true으로 평가되면 경고를 발생 시킵니다.

import // ...

function App() {
  const [phrase, setPhrase] = useState('');

  if (phrase === 'open sesame') {
    alert('You may pass!');
  }

  return (
    <div className="App">
      // return JSX
    </div>
  );
}