在反应钩子中设置 setState

时间:2021-05-20 20:03:31

标签: javascript html reactjs typescript antd

我在 create signature 中有两个按钮 Create deliveryPageOne.tsx,当状态为 InDelivery 时,两个按钮都是可见的。

我的观点是如何在开始时隐藏 Create delivery 按钮,但是当用户点击 create signature 中的 PageTwo 按钮并在该页面内用户点击 Submit 按钮时将用户带回此 PageOne.tsx

那么这里只有 Create delivery 按钮应该是可见的,如果有人使用我的代码并提供工作示例,(我是新来的)我的代码,我将不胜感激:

import React, { ReactNode, useContext, useEffect, useState } from "react";
export function PageOne(props: React.PropsWithChildren<OrderDetailsDto>) {

    const [deliveredd, setDeliveredd] = useState(false);

    const RedirectToSign = () => {
        setDeliveredd(true);

        history.push("/PageTwo/" + orderId);
    };

    const RedirectToDeliv = () => {
        history.push("/PageThree/" + orderId);
    };
    const SignatureButton = () => {
        if (initialRequest.type == ApiRequestStatus.Complete) {
            var state = initialRequest.responsePayload.order?.state as OrderState;

            if (state == OrderState.InDelivery || state == OrderState.Delivered) {
                return (
                    <div onClick={RedirectToSign} className="Button">
                        create signature
                    </div>
                );
            }
        }
    };
    const UpdateButton = () => {
        if (state === OrderState.InDelivery) {
            return (
                <div onClick={RedirectToDeliv} className="Button">
                    Create delivery
                </div>
            );
        }
    }
    console.log(deliveredd);
    return (
        <div className="orderDetails">

            {UpdateButton()}
            {SignatureButton()}
        </div>
    );
}


我的 PageTwo 应该是这样的:

import React from "react";
import { Button, Form, Input } from "antd";


export function PageTwo(props: React.PropsWithChildren<CreateSignatureProps>) {


    const SendSignature = (values: Values) => {

        api.cargoApi
            .apiCargSignaturePost(request)
            .then((response) => history.push("/PageOne/" + orderId));
    }


    return (
        <Form onFinish={SendSignature}>
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    {t("signature.create")}
                </Button>
            </Form.Item>
        </Form>
    );
}

0 个答案:

没有答案