[英]How to pass via url a PHP variable to be inserted in a JS script url
[英]How to pass variable in URL React js
在 react js 中,我制作了一个简单的日期选择器并从下拉日历中选择日期,并将其显示在控制台中。
该日期存储在变量中,现在如何在 URL 中使用该变量
我的问题:
如何在 React js URL 中传递参数
如何在控制台日志中打印参数
代码:
import React, { Component } from 'react'
import axios from 'axios'
class PostForm extends Component {
constructor(props) {
super(props)
this.state = {
key: '',
}
}
changeHandler = e => {
this.setState({ [e.target.name]: e.target.value })
}
submitHandler = e => {
e.preventDefault()
console.log(this.state)
axios
.get('http://127.0.0.1:8000/hvals_hash?key=31/8/21')
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
}
render() {
const { key } = this.state
return (
<div>
<form onSubmit={this.submitHandler}>
<div>
<input
type="text"
name="key"
value={key}
onChange={this.changeHandler}
/>
</div>
<button type="submit">Submit</button>
</form>
</div>
)
}
}
export default PostForm
日期来自日期选择器表单,所以通过日期动态所有如何做到这一点
您可以使用模板文字来传递动态值,如下所示。
componentDidMount(){
const date = "20/8/21";
axios.get(`http://127.0.0.1:8000/hvals_hash?key=${date}`)
.then(response => {
this.setState({
posts:response.data
})
console.log(response.data)
})
}
import {
BrowserRouter,
useParams,
Route,
Routes,
Link,
} from 'react-router-dom';
page:send.jsx =>
<Link to="/get" state={{ from: "test" }}>
test
</Link>
page:get.jsx
import {
BrowserRouter,
useParams,
Route,
Routes,
Link,
useNavigate,
useLocation,
} from "react-router-dom";
const location = useLocation();
const { from } = location.state ? location.state : "null";
console.log(from);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.