So I am trying to display a message when a button is clicked but what it does is that when the page is loaded it displays message boxes (which should not happen) but it doesn't work on onclick I have attached the screenshots to my code and views.
You need to pass your function to the onClick parameter, not invoke it.
<Button type="primary" shape="round" onClick={() => info()} />
or
<Button type="primary" shape="round" onClick={info} />
Related
According to the document here it says callback function onPreview will be executed when file link or preview icon is clicked. But only the file link works for me. I can't figure out what is the problem here.
<Upload
beforeUpload={() => false}
listType="picture"
maxCount={1}
accept="video/mp4"
onPreview={() => console.log("HELLO")}
>
<Button readOnly={someLogic} icon={<UploadOutlined />}>
{t("admin_entity.add_video")}
</Button>
</Upload>
As i checked, the issue is come from file's thumbnail.
It works with with an image ( which can generate a thumbnail in list ).
Maybe you can try to override the thumbnail with some event listener on it, just a workaround solution :)
I used iconRender function to solve this problem
iconRender={(originNode) => (
<PlaySquareTwoTone onClick={() => console.log("HELLO")} />
)}
I am using Material ui Button. this button should hold an image & button-name as its child. i don't want to use as one of the children of my Button, but i want to do it by passing startIcon prop to Button. button should look like:-
i have tried this:-
<Button className={classes.navButtons} startIcon={ZapierIcon}>
Zapier
</Button>
but it is showing path of my image in button instead of actual image....can anyone give some suggestion what i am doing wrong.
Just pass the Avatar in place of icon.
<Button
variant="contained"
color="secondary"
startIcon={<Avatar src={'http://www.wpsimplesponsorships.com/wp-content/uploads/2019/05/cropped-icon-256x256.png'} />}
>
Delete
</Button>
https://codesandbox.io/s/bold-dew-3rl6z
I'm using material ui dialog, and i want to insert a table inside dialog.
Can I do that?
<Button
variant="contained"
color="secondary"
onClick={this.handleOpenDialog}
>
Cancel
</Button>
<Dialog
agree={() =>
this.handleCloseDialog
}
open={this.state.openDialog}
title="Are you sure?"
dialog="Your data will be deleted!"
onClose={this.handleCloseDialog}
></Dialog>
Place the table inside a DialogContent component within your dialog: https://material-ui.com/components/dialogs/#AlertDialog.js
I am using the react-bootstrap Tab component and wish to include a button in the tab title. To set the text of the title you must pass the desired text as props. I want to include a button to remove the tab, appearing next to the text.
I have tried passing a function that returns the button element, but nothing displays in the tab title.
<Tab eventKey={data.name} title={data.name}>
<Button
className={classes.Button}
variant="secondary"
onClick={() => removeData({ id: data.id })}
>X</Button>
<TemplateTabs name={data.name} />
</Tab>
Right now the above code renders the button inside the tab page, whereas the desired location would be in the tab title. The template tabs component is what displays in the tab page. Ideally, I am looking for a way to continue to use the react-bootstrap Tab component, but be able to render the tab title and button to remove the said tab. Below is the documentation for the Tab component I am implementing from react-bootstrap. Please let me know if any more information would be useful.
https://react-bootstrap.github.io/components/tabs/
The documentation says type node: https://react-bootstrap.github.io/components/tabs/#tab-props
So this should work:
<Tab
eventKey={data.name}
title={
<>
{data.name}
<Button
className={classes.Button}
variant="secondary"
onClick={() => removeData({ id: data.id })}>
X
</Button>
</>
}>
<TemplateTabs name={data.name} />
</Tab>
I am trying to convert an older Material UI implementation. The Docs are bit laggy.
I get this error. The docs say
Name Type Default Description
children * node The content of the
button.
What does this mean and what do I have to put in my code?
<Button
variant="raised"
color="primary"
className={classes.Button}
label={this.state.buttonLabel}
onClick={this.handleClick}
>
</Button>
"children" are what is between the tags:
<Button>we are the children</Button>
Because you don't pass anything - it's undefined. To fix error just add something that React can render, like string:
<Button
variant="raised"
color="primary"
className={classes.Button}
label={this.state.buttonLabel}
onClick={this.handleClick}
>
My Button
</Button>;
Looks like they removed the label property and moved it to the children prop.
So you have to put it between the tags e.g.
<Button> here comes the label </Button>
You can always check the demos for the Components. See here