diff --git a/src/components/common/input/QInput.jsx b/src/components/common/input/QInput.jsx index 484d9859..aea2d66e 100644 --- a/src/components/common/input/QInput.jsx +++ b/src/components/common/input/QInput.jsx @@ -1,6 +1,8 @@ 'use client' -export default function QInput({ type, readOnly = false, options, value, onChange }) { +import { useCallback } from 'react' + +export default function QInput({ type, readOnly = false, options = [], value, onChange }) { // options = options || [ // { // id: 'one', @@ -19,14 +21,24 @@ export default function QInput({ type, readOnly = false, options, value, onChang // }, // ] - const handleChange = (e, optionValue) => { - if (type === 'radio') { + const handleChange = useCallback( + (e, optionValue) => { + if (type === 'radio') { + onChange(e.target.value) + } else { + const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue] + onChange(newValue) + } + }, + [type, value, onChange], + ) + + const handleTextChange = useCallback( + (e) => { onChange(e.target.value) - } else { - const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue] - onChange(newValue) - } - } + }, + [onChange], + ) return (
@@ -34,12 +46,12 @@ export default function QInput({ type, readOnly = false, options, value, onChang
{type === 'text' ? (
- onChange(e.target.value)} /> +
) : type === 'radio' || type === 'checkbox' ? (
{options?.map((option) => ( -
+