[React] Day 11 - input 상태 관리하기

InputSample.js 파일 추가

import React from 'react';

function InputSample() {

  return (

    <div>

      <input />

      <button>초기화</button>

      <div>

        <b>값: </b>

      </div>

    </div>

  );

}

export default InputSample;

 

➡️input에 값을 입력하면 그 값이 하단에 나타나게하고, 초기화 버튼을 누르면 input값이 비워지도록 구현하기.

 

📌e.target.value을 불러오면 input에 담긴 값을 확인 할 수 있다.

<input onChange={onChange} value={text}></input>

📌input의 상태를 업데이트를 할때에는 value값을 필수적으로 지정해줘야한다.

 

InputSample.js

import React, {useState} from 'react';

function InputSample() {

  const [text, setText] = useState("");

  const onChange = (e) => {

    setText(e.target.value);

  };

  const onReset = (e) => {

    setText("");

  }

  return (

    <div>

      <input onChange={onChange} value={text}></input>

      <button onClick={onReset}>초기화</button>

      <div>

        <b>값: {text}</b>

      </div>

    </div>

  );

}

export default InputSample;

 

📌onChange 함수에서 e.target.value로 값을 지정해준다.

 

결과사진