믹아의 개발일기

Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

인풋창을 입력하는 순간 이런 에러가 뜨더라.. input value 로 undefined 가 들어가서 그런듯하다

const [ip, setip] = useState();
<input onChange={setip} value={ip} />

대략 내 상황..

const [ip, setip] = useState(''); // 해결방안 1 : 초기값을 '' 로 
<input onChange={setip} value={ip || ''} />  <!-- 해결방안 2 : 값이 undefined 일경우 value 를 ''로 --!>

이렇게 해결

input type='file' 로 비디오 파일을 선택해서 video 태그로 재생해보자

<!-- HTML -->
<input id="file" type="file" accept="video/mp4,video/mkv, video/x-m4v,video/*">
<video id="video"></video>

input 에 type 은 file로, accept 로 비디오 확장자로 설정했다.

// Javascript

const inputFile = document.getElementById("file");
const video = document.getElementById("video");

inputFile.addEventListener("change", function(){
    const file = inputFile.files[0];
    const videourl = URL.createObjectURL(file);
    video.setAttribute("src", videourl);
    video.play();
})

일단 간단하게 이렇게 만들수 있다.

샘플 페이지

codepen.io/mika0203/pen/VwPKLLM

input 태그에서 엔터 입력시 input의 값을 얻어오는 방법이다.

<input id="input">

<script type="text/javascript">

	// id 로 input 객체를 가져온다.
	var input = document.getElementById("input");
    
	// 가져온 객체에 EventListener 를 추가한다. keypress = 키입력 감지
	input.addEventListener('keypress', function(key){

	// key.key 의 값이 Enter 일 경우 코드 실행
        // key.keyCode == 13 도 동일한 기능을 한다.
        if(key.key == 'Enter'){
			var inputValue = input.value;
            console.log(inputValue);
            }
        })
        
</script>