react input 입력 상자 의 값 가 져 오기

\ # react input 입력 상자 의 값 을 가 져 오 는 다양한 방식
  • 첫 번 째 방식 은 제어 되 지 않 는 구성 요소 가 져 오기
  • 두 번 째 방식 으로 제어 되 는 구성 요소 가 져 오기
  • \ # \ # 비 제어 구성 요소 ref 가 져 오기
    import React , {Component} from 'react';
    export default class App extends Component{
    	search(){
    		const inpVal = this.input.value;
    		console.log(inpVal);
    	}
    	
    	render(){
    		return(
    			
    this.input = input} defaultValue="Hello"/>
    ) } }

    defaultValue 를 사용 하여 구성 요소 의 기본 상 태 를 표시 합 니 다. 이 때 는 한 번 만 렌 더 링 되 고 후속 렌 더 링 은 작 동 하지 않 습 니 다.input 의 값 은 외부 에 따라 바 뀌 지 않 고 자신의 상태 에 따라 변 합 니 다.
    \ # \ # \ # 제 어 된 구성 요소 this. setState ({})
    import React , {Component} from 'react';
    export default class App extends Component{
    	constructor(props){
    		super(props);
    		this.state = {
    			inpValu:''
    		}
    	}
    	
    	handelChange(e){
    		this.setState({
    			inpValu:e.target.value
    		})
    	}
    	
    	render(){
    		return(
    			
    ) } }

    input 입력 상자 의 값 은 사용자 의 입력 에 따라 달라 집 니 다. onChange 는 대상 e 를 통 해 변 경 된 상 태 를 가 져 오고 state 를 업데이트 합 니 다. setState 는 새로운 상태 에 따라 보기 렌 더 링 을 촉발 하여 업 데 이 트 를 완료 합 니 다.

    좋은 웹페이지 즐겨찾기