input_응용해보기

qwe8851·2022년 9월 18일

💎 React

목록 보기

9/37

📎응용1)

글추가 버튼 구현

직접 html을 넣어 요청할 필요 x
html은 이미 만들어둠
state만 건들면 만들어질 듯?

// input값이 저장될 state만들기
let [입력값, 입력값변경] = useState('');

// 입력값state의 값을 input에 들어있는 값으로 변경
<input onChange = { (e)=> {
  입력값변경(e.target.value);
}} />

//버튼생성
<button onClick = { ()={
  let copy = [...글제목];
  copy.unshift(입력값);
  글제목변경(copy);
}} >글발행</button>

unshift()는 array자료형 제일 앞에 데이터를 삽입할때 사용

📎응용2)

글삭제 버튼 구현

let [글제목, 글제목변경] = useState('글제목1', '글제목2', '글제목3');

글제목.map(function(a,i) {
  retunr(
  	<div className="list" key={i}>
        ...
        <button onClick={ ()=>{
  			let copy=[...글제목];
  			copy.splice(i, 1)
            글제목변경(copy);
  		>삭제</button>
    </div>
  )
}

📎응용3)

input이 비어있으면 발행 막기

<button onClick = { (e)=> {
  let copy = [...글제목];
  if(입력값 == ''){
    e.preventDefalut();
  } else {
    copy.unshift(입력값);
  }
  글제목변경(copy);
}} >글발행</button>

❓ 글쓰다가 생각났는데 e.stopPropagation()도 되나?
→ 오 e.stopPropagation()도 가능

📎응용3-2)

input발행 버튼 생성한 부부에 따봉도 추가해 줌

<button onClick = { (e)=> {
  let copy = [...글제목];
  let 따봉copy = [...따봉];
  
  if(입력값 == ''){
    e.preventDefalut();
  } else {
    copy.unshift(입력값);
    따봉copy.unshift(0);
  }
  글제목변경(copy);
  따봉변경(따봉copy);
}} >글발행</button>

📎응용4)

날짜데이터도 state 생성

{
  글제목.map(function(a, i){
    return(
      <div className="list" key={i}>
          <h4 onClick={ (e)=>{ setModal(!modal); setTitle(i)} }>{ a } 
              <span onClick={ (e) => {
                let copy = [...따봉];
                copy[i] += 1;
                따봉변경(copy);
                e.stopPropagation();
              }}>👍</span> {따봉[i]} 
          </h4>
          <p>{new Date(+new Date() + 3240*10000).toISOString().split("T")[0]}</p>
          {/* 삭제버튼 */}
          <button onClick={()=>{
              let copy = [...글제목];
              copy.splice(i, 1);
              글제목변경(copy);
          }}>삭제</button>
	  </div>   
)     
})
}