Question

如何更新字符串中的参数值？我有一个名为historyURL的初始状态：“ search？keyword = [keyword]＆subject = [subject]”。我想稍后在事件处理程序中更新[keyword]和[subject]的状态值。在Reactjs中有可能吗？

state={historyurl:'search?keyword=[keyword]&subject=[subject]',
       keyword:'',
       subject:''
}
onSubjectChange(subject)=>{
    setState({subject:subject,
    historyurl:'search?keyword='+this.state.keyword+'&subject='+subject});
  }
onKeywordInput(keyword)=>{
    setState({keyword:keyword,
             historyurl:'search?keyword='+keyword+'&subject="+this.state.subject});
}

Answer 1

JavaScript本身没有内置处理查询字符串参数的功能

在（现代）浏览器中运行的代码，您可以使用URL object（这是浏览器向JS提供的API的一部分）：

var url_string = "http://" + "search?keyword=[keyword]&subject=[subject]"; 
var url = new URL(url_string);
var keyword = url.searchParams.get("keyword");
console.log(keyword);

// set value
url.searchParams.set("keyword", "[new keyword]");
keyword = url.searchParams.get("keyword");
console.log(keyword);

就您而言，也许您可以使用上述方法创建一个名为updateParam(url, key, value)的函数并更新状态

onKeywordInput(keyword)=>{
   this.setState(prevState => ({
      keyword: keyword,
      historyurl: updateParam(prevState.historyurl, 'keyword', keyword)
   }));
}

function updateParam(urlParam, key, value) {
  var url = new URL("http://" + urlParam);
  url.searchParams.set(key, value);
  return url.toString().slice(7); // remove "http://"
}

console.log(updateParam("search?keyword=keyword&subject=subject", "keyword", "newKeyword"))

更新状态中的参数值

1 个答案: