분류 Reactjs

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

컨텐츠 정보

  • 조회 341 (작성일 )

본문

이벤트는 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 단계로 해결됩니다.

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

양식 데이터를 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>
  );
}

이를 통해 사용자가 open sesame를 입력하면 브라우저가 전달할 수 있는 경고 메시지를 표시합니다.


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


of54xjrjyy6comuucvcm.mp4 



완성 된 버전은 https://codesandbox.io/s/n15z4oq24l에서 찾을 수 있습니다.


결론


이 과제에서 우리는 데이터 입력을 처리하고 특정 입력에 응답 할 수 있었습니다.