• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 복습중에 질문있습니다.

복습중에 질문있습니다.

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 글쓴이
  • #28051

    이성현
    참가자

    3분의 1을 듣고 나서 복습하려 혼자 ToDoList를 만들어 보고 있습니다.

    원하는 기능들을 넣긴 했지만 아무리 검색하고 또 따라해도 onClick의 기능을 엔터키로 대체할 수 없었습니다.

    또 input 에 입력을 하고 button을 눌렀을때 input창이 다시 비어있도록 만들고 싶었는데 그러지 못하였습니다.

    클릭을 엔터키로 대체하고 인풋창을 다시 비어있도록 하는데에 어떤 방법이 있을까요.

    또 제가 작성한 코드에서 불필요한 것은 어떤 것인지 확인 받을 수 있을까요.

     

    import React, { useState } from 'react';
    import moment  from 'moment';
    import Check from './check.svg'
    import Trash from './trash.svg'
    import './App.css';

    function App() {

      var nowTime = moment().format('YY-MM-DD HH:mm:ss');
      let [글목록,목록수정] = useState([])
      let [글쓰기, 글수정] = useState('')
      let [시간, 시간수정] = useState([nowTime])
      let [시간쓰기, 시간설정] = useState(nowTime)
     

      function 글넣기() {
        var new글배열 = [...글목록];
        new글배열.unshift(글쓰기);
        목록수정(new글배열)
      }

      function 시간넣기() {
        var new시간배열 = [...시간]
        시간설정(nowTime)
        new시간배열.unshift(시간쓰기)
        시간수정(new시간배열)
      }

    return (
        <div className="App">
          <div className='nav'>
            <div style={ {marginLeft : '10px' }}>ToDoList</div>
          </div>
          <input onChange={ (e) => { 글수정(e.target.value) } } ></input>
          <button onClick={ ()=>{ 글넣기(); 시간넣기(); } } >추가하기</button>
       
          {
            글목록.map((글,i) => {
              return(
                <div className='list' key={i}>
                  <h4> <span>{글목록.length-i})</span> { 글목록[i] }</h4>
                  <p>
                    { 시간[i] }
                    <span> {
                      var newArray = [...글목록]
                      newArray[i] = '완료'
                      목록수정(newArray)
                    } }></img></span>
                    <span> {
                      var newArray = [...글목록]
                      newArray.splice(i,1)
                      목록수정(newArray)
                    } }></img></span>
                  </p>
                  <hr></hr>
                  <div style={ {clear:'both'}}></div>
                </div>
              )
            })
          }
       
        </div>
      );
    }

    export default App;

     

    #28066

    codingapple
    키 마스터

    <input onKeyDown={(e)=>{ 

    if (e.key === 'Enter') {
    console.log('엔터누름')
    }

    }} >

    이러면 엔터누름 체크해줄듯요 

    e.target.value가 input의 입력값이고 그걸 비우는건 e.target.value = ''; 하면 됩니다 

    #28128

    이성현
    참가자

    감사합니다 선생님

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠