Question

我有一个带有多个搜索过滤器的搜索表单。

我遵循了教程示例

https://dev.to/gaels/an-alternative-to-handle-global-state-in-react-the-url--3753

它可以与一个搜索过滤器，输入文本框或复选框配合使用。但是现在两者都有。网址看起来像这样

OR

https://apiurl/?keyword=&checkbox=item1。

我不知道如何更新两个参数的状态。有什么建议吗？应该使用state={ query:{keyword:'', checkbox:[]}}之类的查询参数对象还是仅使用state={keyword:'', checkbox:[]}之类的查询参数对象，以及如何更新多个参数的URL？

谢谢。

Answer 1

function getParams(location) {
  const searchParams = new URLSearchParams(location.search);
  return {
    keyword: searchParams.get('keyword') || '',
    checkbox: searchParams.get('checkbox') || '',
  };
}

function setParams({keyword = "", checkbox = ""}) {
  const searchParams = new URLSearchParams();
  searchParams.set("keyword", keyword);
  searchParams.set("checkbox", checkbox );
  return searchParams.toString();
}


state = { keywordValue: "", checkboxValue: "" };
updateKeywordValue =  e => this.setState({ keywordValue: e.target.value });
updateCheckboxValue =  e => this.setState({ updateCheckboxValue : e.target.value });

使用这些函数代替updateInputValue，然后创建另一个函数，该函数在单击按钮时触发，调用setParams函数。

现在调用this.props.history.push(?`${url}\`);会将值推入两个查询参数

要获取参数，您必须执行const {keyword, checkbox} = getParams(location);

URL中的多个参数

1 个答案: