时间戳

首页 > 解决方案 > 更新查询字符串 onChange - reactjs

javascript - 更新查询字符串 onChange - reactjs

问题描述

我有一个带有查询字符串的 url，看起来像这样

http://localhost:3000/collection?page=1&limit=15&filter=%27%27&filterInitDate=2019/11/11&filterEndDate=2019/11/11

我只想filterInitDate在我从日期输入中选择日期时更新。我知道我可以简单地通过使用来更新 url，但是当我更改日期输入时我this.props.history.push怎么能更改/更新filterInitDate

理想情况下是这样的

history.push(`/collection?filterInitDate=${startDate}`)

标签： javascriptreactjsquery-string

解决方案

您可以为此使用URL和URLSearchParams类，这是一个示例：

const urlStr = 'http://localhost:3000/collection?page=1&limit=15&filter=%27%27&filterInitDate=2019/11/11&filterEndDate=2019/11/11';
const url = new URL(urlStr);
url.searchParams.set("filterInitDate", "2019/11/12");

console.log(url.toString());

特定于反应路由器的示例如下所示：

const query = new URLSearchParams(history.location.search);
query.set("filterInitDate", startDate);
history.replace({
  search: query.toString()
});

推荐阅读