Input 상태

shin·2022년 4월 8일
0

React

목록 보기
6/14
import React,{useState} from 'react';

function InputSample(){
    
    const [text, setText] = useState('');

    const onChange = (e) => {
        setText(e.target.value);
    };
    // e는 이벤트가 발생한 dom의 정보를 가지고 있다. 
    // 여기서는 input을 가리킨다   
    // 값을 알고싶을 때 value를 붙인다. e.targer.value

    const onReset = () => {
        setText('');
    }

    return(
        <div>
            <input onChange={onChange} value={text} /> 
      		//박스에 초기화 버튼을 눌렀을때 텍스트도 같이 초기화하려면
            //value={text} 값을 적는다
            <button onClick={onReset}>초기화</button>
            <div>
                <b>: </b>
                {text}
            </div>
        </div>
    )
}

export default InputSample;

0개의 댓글