데이터 업로드의 시작이었던 disabled
disabled를 mdn에서는 이렇게 설명하고 있다. Boolean disabled 속성이 있는 경우 요소를 변경하거나 포커스할 수 없거나 양식과 함께 제출할 수도 없습니다
내가 구성한 코드 구성상 데이터의 name이 반드시 필요하게 구성되어 있다.
case ADD_TODO:
console.log(action.addtodo)
console.log(action.addtodo.data)
// name이 같은 데이터를 찾는다
let data = state.items.find((ele:any) => (ele.name === action.addtodo.data))
console.log(data);
// addData라는 변수에 action.payload 넣고
const addData = Object.assign({}, data, { textBox: [...data.textBox, action.addtodo.data]})
console.log(addData);
// 데이터를 전체 state 값들과 합친다.
for (let i = 0; i<state.items.length; i++ ) {
if(state.items[i].name === addData.name) {
state.items[i] = addData
}
}
return Object.assign({}, state)
reducer에서 action을 통해 데이터를 받아 왔을 때 각 사진마다 글을 기록하기 위해서 id값으로 각 배열을 찾게 하지 않고 name을 찾도록 코드를 구성하였기 때문에 name값은 반드시 필요했다. 따라서 name값을 입력하지 않으면 등록을 불가하게 만들었고 추가적으로 가격 또한 입력하지 않으면 등록을 불가하게 만들었다. 그 해결책으로 disabled을 사용하였다. 앞서 블로깅하였던 유효성 검사 코드에서 보면
const onNameChange = (e:React.ChangeEvent<HTMLTextAreaElement>) => {
setName(e.target.value)
if (e.target.value.length < 2 || e.target.value.length > 20) {
setNameMessage('2글자 이상 20글자 이하로 입력해주세요.')
setIsName(false)
} else {
setNameMessage('올바른 이름 형식입니다 :)')
* setIsName(true)
}
}
const onPriceChange = (e:React.ChangeEvent<HTMLTextAreaElement>) => {
const priceVali = /^[0-9]+$/
const priceCurrent = e.target.value;
setPrice(priceCurrent)
if (!priceVali.test(priceCurrent)) {
setPriceMessage('숫자만 입력해주세요')
} else {
setPriceMessage('올바른 형식입니다.')
* setIsPrice(true);
}
}
올바른 형식이면 setIsName(true) setIsPrice(true)가 되도록 설정하였다 true일 때만 등록이 가능하게 구성했기 때문이다.
<button type='submit' className='submitBtn' disabled={!(isName && isPrice)}>등록</button>
사실 간단한 코드일수도 있지만 처음 시도해봤던 기능이라 처음에는 고민을 많이 했고 다행이 구현이 되었다.
Author And Source
이 문제에 관하여(데이터 업로드의 시작이었던 disabled), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yonghk423/데이터-업로드의-시작이었던-disabled저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)