〰 input

박시하·2021년 11월 15일
0

React

목록 보기
7/17

❗  사용자가 input에 입력한 데이터를 state로 저장하는 법

function App (){
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
      HTML 잔뜩있는 곳...
    </div>
  )
}

❗  사용자가 input에 입력한 값 알아내는 법
input에 onChange 이벤트핸들러를 달고 자바스크립트 문법을 쓰시면 됩니다.

function App (){
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
      HTML 잔뜩있는 곳...
      <input onChange={ (e)=>{ console.log(e.target.value) } } />
    </div>
  )
}

❗  input에 뭔가 입력할 때마다 input에 입력된 값을 state에 저장

function App (){
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
      HTML 잔뜩있는 곳...
      <input onChange={ (e)=>{ 입력값변경(e.target.value) } />
    </div>
  )
}

ex)
button을 눌렀을때 input에 있는 입력값을 저장하고 array의 맨 앞에 추가

 <button onClick={ ()=>{ 
          let arrayCopy = [...array];
          arrayCopy.unshift(입력값);
          array변경( arrayCopy )
         }}>저장.
</button>
profile
기본 회원

0개의 댓글