-
글쓴이글
-
2022년 2월 24일 01:05 #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;
2022년 2월 24일 10:23 #28066
codingapple키 마스터<input onKeyDown={(e)=>{
if (e.key === 'Enter') {
console.log('엔터누름')
}}} >
이러면 엔터누름 체크해줄듯요
e.target.value가 input의 입력값이고 그걸 비우는건 e.target.value = ''; 하면 됩니다
-
글쓴이글
- 답변은 로그인 후 가능합니다.