reactjs - 如何在 reactnative 中的 webservice 确认时禁用 react native 中的按钮

Question

我有如下情况，在收到确认在 sendacknowledgement 功能中成功时，我想禁用按钮任何想法请帮助....//在 ack 响应中的代码中：是成功然后禁用//或如果它进入gotourl() 然后禁用

function gotourl() {
    console.log("url===> ", url);

    if (url != null) {
        console.log("url===> ", url);
        Linking.openURL(url);
    }
    acknowledgement = JSON.stringify({
        ack: {
            UserId: userid,
            EventId: messageid,
            EventName: event,
            EventStatus: "Accepted",
        },
    });
    sendack();
}

const deleteItem = (index) => {
    acknowledgement = JSON.stringify({
        ack: {
            UserId: userid,
            EventId: messageid,
            EventName: event,
            EventStatus: "Rejected",
        },
    });
    sendack();
};

function sendack() {
    fetch("url")
        .then((response) => response.json())
        .then((data) => {
            sendacknowledgement(data);
        });
}

function sendacknowledgement(beatoken) {
    console.log("inside send ack token ====>>>>", beatoken);
    console.log("acknowledgement===>", acknowledgement);

    fetch("url", {
        method: "PUT",
        withCredentials: true,
        credentials: "include",
        headers: {
            Authorization: "Bearer " + beatoken,
            "Content-Type": "application/json",
        },

        body: acknowledgement,
    })
        .then((response) => response.json())
        .then((data) => console.log("ACK Response: ", data))
        .catch((err) =>
            console.log("ERROR DURING SENDING ACKNOWLEDGEMENT ===> ", err)
        );
}

return (
    <View style={styles.container}>
        {view.length <= 3 ? (
            <>
                <Text style={styles.heading}>NO NEW MESSAGES</Text>
            </>
        ) : (
            <>
                <Text style={styles.textStyle}>{data}</Text>
                <Button
                    onPress={() => gotourl()}
                    title="Accept"
                    color="green"
                />
                <Button
                    onPress={() => deleteItem()}
                    title="Delete"
                    color="red"
                />
            </>
        )}
    </View>
);
};

Answer 1

为了实现您的任务，声明一个新状态以动态禁用按钮

const [isDisable, setIsDisable] = React.useState(false)

当您的网络服务完成获取并成功将 isDisabled 的状态更新为 true

.then((data) => {
  console.log("ACK Response: ", data)
  setIsDisabled(true)
})

最后使用 React 原生道具disabled并传递你的状态

<Button
         onPress={() => gotourl()}
         title="Accept"
         color="green"
         disabled={isDisable}                 
                />

到你需要的这个逻辑