react Изменяем GET параметр из URL в обработчике события
Primary tabs
Пример на typescript, на JS все будет тем же, кроме описания типов:
import React from "react"; import { ChangeEventHandler } from "react"; import TextInput from "./TextInput"; import { History } from 'history'; import { StringKeyObject } from '@app-types'; import queryString from 'query-string'; type TextInputPropsType = { value?: any, onChange?: ChangeEventHandler, history: History, getParamName: string, } export default function UrlSyncedTextInput(props: TextInputPropsType) { const { value, onChange, history, getParamName } = props; const onChangeSelf = React.useCallback((evt) => { let params: StringKeyObject = queryString.parse(history.location.search); params[getParamName] = evt.target.value; console.log('history.location', history.location, params); history.replace(history.location.pathname + '?' + queryString.stringify(params)); if (onChange) onChange(evt); }, [onChange, history, getParamName]); return ( <TextInput value={value} onChange={onChangeSelf} /> ); }
-- этот компонент как раз отвечает за изменение некоторого вложенного инпута TextInput и GET-параметра в адресной строке с именем getParamName.
- Log in to post comments
- 2286 reads