React.js中如何将日期选择器的变量动态传入URL并打印参数

1. 动态传递日期参数实现 #

你目前的代码里axios请求的查询参数是硬编码的，只需要把日期选择器存储到state.key的值动态拼接到请求URL即可，更推荐用axios内置的params配置项，自动处理参数编码，避免特殊字符报错。
修改submitHandler部分的代码即可：

submitHandler = e => {
    e.preventDefault()
    // 先打印要传递的日期参数，对应控制台打印需求
    console.log('要传递的日期参数key：', this.state.key)
    axios
        .get('http://127.0.0.1:8000/hvals_hash', {
            // 这里的params会自动拼接为 ?key=xxx 的格式
            params: {
                key: this.state.key
            }
        })
        .then(response => {
            console.log('接口返回结果：',response)
        })
        .catch(error => {
            console.log('接口报错：',error)
        })
}

如果你是用日期选择器替换原来的text输入框，只需要保证日期选择器的onChange事件触发时，把选中的日期值更新到state.key即可，逻辑和现有changeHandler一致。

2. React中URL传递参数的常用方式 #

• 查询参数（即你当前使用的?key=xxx格式）：多用于GET请求传筛选类参数，除了上面axios的params写法，也可以直接用模板字符串拼接：http://127.0.0.1:8000/hvals_hash?key=${encodeURIComponent(this.state.key)}，注意手动拼接要加encodeURIComponent处理特殊字符。
• 路径参数：多用于Restful风格接口，比如/user/123里的123就是用户id参数，拼接方式和上面模板字符串一致。

3. 控制台打印URL参数的方法 #

• 如果你要打印自己发请求时传递的参数：直接打印对应的state变量或者你定义的参数对象即可，比如上面代码里的console.log('要传递的日期参数key：', this.state.key)。
• 如果你要打印当前页面URL上带的参数：可以用URLSearchParamsAPI，示例代码如下：

// 假设当前页面url是 http://xxx.com/page?key=2024/5/20
const urlParams = new URLSearchParams(window.location.search)
const key = urlParams.get('key')
console.log('当前页面URL的key参数：', key)

内容的提问来源于stack exchange，提问作者user17022531