B
B
brokeninsideclown2021-01-11 10:16:05
JavaScript
brokeninsideclown, 2021-01-11 10:16:05

How to create a button in vk mini apps that would display a function?

There is a code

/* global VK */
import React from 'react';
import PropTypes from 'prop-types';
import Panel from '@vkontakte/vkui/dist/components/Panel/Panel';
import PanelHeader from '@vkontakte/vkui/dist/components/PanelHeader/PanelHeader';
import Button from '@vkontakte/vkui/dist/components/Button/Button';
import Group from '@vkontakte/vkui/dist/components/Group/Group';
import Cell from '@vkontakte/vkui/dist/components/Cell/Cell';
import Div from '@vkontakte/vkui/dist/components/Div/Div';
import Avatar from '@vkontakte/vkui/dist/components/Avatar/Avatar';



const Home = ({ id, go, fetchedUser }) => (
  <Panel id={id}>
    <PanelHeader>Example</PanelHeader>
    {fetchedUser &&
    <Group title="User Data Fetched with VK Bridge">
      <Cell
        before={fetchedUser.photo_200 ? <Avatar src={fetchedUser.photo_200}/> : null}
        description={fetchedUser.city && fetchedUser.city.title ? fetchedUser.city.title : ''}
      >
        {`${fetchedUser.first_name} ${fetchedUser.last_name}`}
      </Cell>
    </Group>}

    <Group title="Navigation Example">
      <Div>
        <Button size="xl" level="2" onClick={go} data-to="persik">
          Show me the Persik, please
        </Button>
      </Div>
    </Group>
  </Panel>
);

Home.propTypes = {
  id: PropTypes.string.isRequired,
  go: PropTypes.func.isRequired,
  fetchedUser: PropTypes.shape({
    photo_200: PropTypes.string,
    first_name: PropTypes.string,
    last_name: PropTypes.string,
    city: PropTypes.shape({
      title: PropTypes.string,
    }),
  }),
};

export default Home;

How to make it so that when the button is pressed, instead of switching to the peach activity, the function is launched
<Button size="xl" level="2" onClick={go} data-to="persik">
          Show me the Persik, please
        </Button>
function dwer() {
 	bridge.send("VKWebAppShowNativeAds", {ad_format:"preloader"}) 
         .then(data => console.log(data.result)) 
        .catch(error => console.log(error));
 }

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
darksnaper, 2021-08-13
@darksnaper

<Button size="xl" level="2"onClick={()=>{bridge.send("VKWebAppShowNativeAds", {ad_format:"preloader"}) 
         .then(data => console.log(data.result)) 
        .catch(error => console.log(error));}}>
          Show me the Persik, please
        </Button>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question