从网址获取信息 [英] getting information from url
问题描述
在这里反应初学者,英语不是我的母语,所以对不起您会犯错误.我从那里获得了url,我想获取信息,我将展示如何完成其他页面(使用 antd
表单),但是现在我在另一个页面中,URL的末尾是 payer = sender
,因此,如果 payer
是"sender"
,请执行此操作.网址末尾的"payer = sender"是通过单击一个发件人按钮来实现的,然后单击该表单时,输入的内容应相应填充
const senderPays =()=>{history.push(`/bilInfo/$ {custId}?$ {query}& payer = sender`);};
< Button onClick = {senderPays}> Sender</Button>
在以前的页面中,我可以这样从URL中获取 pickUpName
:
const query = window.location.toString().split(?"))[1];const urlParams = new URLSearchParams(query);const PickUpName = urlParams.get(" pickUpName")||props.customer?.name;< Form.Itemlabel ="pickUpName"name ="pickUpName";initialValue = {PickUpName ||""}><输入类型=字符串";/></Form.Item>
这是我的网址: https://localhost:5001/#/billingInfo/5dc9d690-a549-4baf-868e-a441c6c4ff47?pickUpName = gholam& pickUpContactPerson =& pickUpPhone = 8744444& pickUpAddress = gerbytnie& pickUpPostalCode= 65230& pickUpPostalRegion = helsnki& deliveryName = shammms& deliveryContactPerson = kalle& deliveryPhone = 2658265& deliveryAddress =& deliveryPostalCode = 65230& deliveryPostalRegion =&付款人=发件人
您可以看到url的末尾是& payer = sender
因此,如果 payer
是发送者,则具有以下信息;如果 payer
是接收者,则具有以下信息:
这是我的代码:
useEffect(()=> {如果(付款人===发送人"){billingName = PickUpName;}否则,如果(付款人===收款人"){billingName = DeliveryName;}
},[付款人]);
组件
< Form.Itemlabel ="billingName"name ="billingName";initialValue = {billingName ||""}><输入类型=字符串";/></Form.Item>
因此,我需要以某种方式在我的表单initialValue中获取该 billingName
,具体取决于谁是付款人
.
使用useForm react钩子手动初始化字段:
摘要:
- 使用
useForm()
初始化表单实例. - 将该
FormInstance
传递给您的Form
- 使用
useEffect
挂钩基于payer
的值动态设置
Form.Item
的值 从"antd"导入{表格};const Demo =()=>{////请注意`useForm`是一个React Hook,仅适用于功能组件const [form] = Form.useForm();const payer = new URLSearchParams(window.location.search).get('payer');//根据付款人"值手动初始化billingNameuseEffect(()=> {如果(付款人===发送人"){form.setFieldsValue({billingName:request.pickUpName});}否则,如果(付款人===收款人"){form.setFieldsValue({billingName:request.deliveryName});}},[付款人])//将FormInstance`form`传递给您的Form返回 (< Form form = {form}>< Form.Itemlabel ="billingName"name ="billingName";>...</Form.Item>...)
以下一些文档可以为您提供帮助:
React beginner here, English is not my mother language so sorry for mistakes. I have url from there I want to get information I will show how I have done other pages(using antd
form), but now I'm in different page where at the end of my url is payer=sender
, so if payer
is "sender"
then do this. that 'payer=sender' at the end of my url comes by clicking a sender button, then when it is clicked form input should fill accordingly
const senderPays = () => {
history.push(`/bilInfo/${custId}?${query}&payer=sender`);
};
<Button onClick={senderPays}>Sender</Button>
In previous pages I could get pickUpName
from url like this :
const query = window.location.toString().split("?")[1];
const urlParams = new URLSearchParams(query);
const PickUpName = urlParams.get("pickUpName") || props.customer?.name;
<Form.Item
label="pickUpName"
name="pickUpName"
initialValue={PickUpName || ""}
>
<Input type="string" />
</Form.Item>
This is my url: https://localhost:5001/#/billingInfo/5dc9d690-a549-4baf-868e-a441c6c4ff47?pickUpName=gholam&pickUpContactPerson=&pickUpPhone=8744444&pickUpAddress=gerbytnie&pickUpPostalCode=65230&pickUpPostalRegion=helsnki&deliveryName=shammms&deliveryContactPerson=kalle&deliveryPhone=2658265&deliveryAddress=&deliveryPostalCode=65230&deliveryPostalRegion=&payer=sender
As you can see end of url is &payer=sender
so if payer
is sender then have these information and if payer
is receiver then have these information:
this is my code:
useEffect(() => {
if (payer === "sender") {
billingName = PickUpName;
} else if (payer === "receiver") {
billingName = DeliveryName;
}
}, [payer]);
Component
<Form.Item
label="billingName"
name="billingName"
initialValue={billingName || ""}
>
<Input type="string" />
</Form.Item>
So I need somehow to get that billingName
in my forms initialValue, depending who is payer
.
Use the useForm react hook to manually initialize fields:
Summary:
- Initialize a form instance using
useForm()
. - Pass that
FormInstance
to yourForm
- Use
useEffect
hook to dynamically set the value of theForm.Item
based on the value ofpayer
import { Form } from 'antd';
const Demo = () => {
// Note that `useForm` is a React Hook and will only works in functional components
const [form] = Form.useForm();
const payer = new URLSearchParams(window.location.search).get('payer');
// Manually initialize billingName based on `payer` value
useEffect(() => {
if (payer === "sender") {
form.setFieldsValue({ billingName: request.pickUpName });
} else if (payer === "receiver") {
form.setFieldsValue({ billingName: request.deliveryName });
}
}, [payer])
// Pass the FormInstance `form` to your Form
return (
<Form form={form}>
<Form.Item
label="billingName"
name="billingName"
>
...
</Form.Item>
...
)
Here's some documentation to help you out:
这篇关于从网址获取信息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!