選択した値のみをqueryParameterとして送信
9514 ワード
urlにフィルタに関する情報を表示するために、フィルタされた情報を抽出し、
productlist
pathの後ろに貼り付けてurlを移動する個別の関数を作成しました.
const themes = ['해변', '숲', '도심'];
const [checkedTheme, setCheckedThemes] = useState([]);
const handleCheckedThemes = e => {
const curr = checkedTheme;
if (curr.includes(e.target.defaultValue)) {
const removeDoubleChecked = curr.filter(
cur => cur !== e.target.defaultValue
);
setCheckedThemes(removeDoubleChecked);
return;
}
setCheckedThemes([...checkedTheme, e.target.defaultValue]);
};
const getFormatParams = () => {
let queryThemes = '';
let theme = checkedTheme.map(theme => {
if (checkedTheme[0] === theme) {
queryThemes += `?themaGroup=${theme}`;
} else {
queryThemes += `&themaGroup=${theme}`;
}
return queryThemes;
});
const finalCheck = theme.length > 0 ? theme[theme.length - 1] : '?' + null;
const allQueryParams = isVerified
? `${finalCheck}&isVerified=1`
: `${finalCheck}`;
return allQueryParams;
};
const handleSubmit = () => {
const queryParameter = getFormatParams();
setIsOpenModal(prev => !prev);
console.log(queryParameter);
navigate(`/productlist${queryParameter}`);
};
Reference
この問題について(選択した値のみをqueryParameterとして送信), 我々は、より多くの情報をここで見つけました https://velog.io/@seokkitdo/React-checkbox-체크된-값만-queryParameter로-보내기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol