从网址获取信息 [英] 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钩子手动初始化字段:

摘要:

1. 使用 useForm()初始化表单实例.
2. 将该 FormInstance 传递给您的 Form
3. 使用 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>...) 

以下一些文档可以为您提供帮助:

• Antd:手动设置表单字段值
• 反应:useEffect挂钩

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:

1. Initialize a form instance using useForm().
2. Pass that FormInstance to your Form
3. Use useEffect hook to dynamically set the value of the Form.Item based on the value of payer

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:

• Antd: manually setting form field values
• React: useEffect hooks

这篇关于从网址获取信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！