Add button and image. When you click on the button, hide the image; when you click again, show.
<img src="https://image.flaticon.com/icons/svg/2460/2460099.svg" />
<button onClick={this.btn}>Count</button>
you can maintain a state for the same, like
{this.state.isImageVisible?<img src="https://image.flaticon.com/icons/svg/2460/2460099.svg" />:<div></div>}
<button onClick={this.btn}>Count</button>
and on click of button ,
do this
btn =() => {
this.setState({isImageVisible:!this.state.isImageVisible});
}
Hope it helps
Related
Hello i want to loading a button when i am clicking it. My problem is that my buttons are created dynamic. I am using antd styling for the button. My code is below
<Button
loading={this.state.myLoader}
onClick={() => this.myFunction(r,i)}>
Clickme!
</Button>
I was trying using inside onclick method a state that can become true when this function in executed, my problem with this is when i click a button all the button are loading, but i want to loading only the selected button. How i can do this? Inside my onclick method i can take the id of the button that is clicked every time
Try this
this.state = {
myLoader: []
}
In onClick pass the index to the function
this.myFunction = (r, i) => {
const loader = [...this.state.myLoader];
loader[i] = true;
this.setState({myLoader: loader)};
}
in the button
<Button
loading={this.state.myLoader[i]}
onClick={() => this.myFunction(r,i)}>
Clickme!
</Button>
I learn some React-router-dom and it's kind of working but since I have three Components one after the other like a long page. Then When I click about button like this in the top menu;
<Button variant="primary" onClick={() => history.push('/articles')}>
Articles
</Button>
<Button variant="primary" onClick={() => history.push('/stories')}>
Stories
</Button>
<Button variant="primary" onClick={() => history.push('/about')}>
About
</Button>
The /about page is rendered but not scrolled to because it's page number 3. Is there some way to auto scroll to the page?
My menu is not fixed but whenever user scroll up the menu appear and when user scroll down the menu is gone to not block content.
It looks like this three Components forming a long page
Is there maybe something built into react router or useHistory or do I have to figure out some way to make the Components know they are being summoned from main Menu? and then themselves calculate how to scroll to become visible.
I know little React Redux and was thinking I could dispatch and action from the Menu button and mapStateToProp listen for the action in the Component, that then will scroll visible. Feels like a bad hack don't know.
not sure if this works or if this consistent/best solution, but as far as here is no other answers you could try to use this
const onAboutPageClick = () =>{
const aboutPageNode = document.getElementById('aboutPage')
aboutPageNode.scrollIntoView({behavior: "smooth"});
history.push('/about')
}
<Button variant="primary" onClick={() => history.push('/articles')}>
Articles
</Button>
<Button variant="primary" onClick={() => history.push('/stories')}>
Stories
</Button>
<Button variant="primary" onClick={onAboutPageClick}>
About
</Button>
..... some other html code
<div id="aboutPage"> Here is about page </div>
in the the answer above said by Dmitriy Sakhno it gives an error I think because it cann't find it because the page haven't render yet
so I used setTimeout and it worked.
const onAboutPageClick = () => {
history.push('/about')
setTimeout(() => {
const aboutPageNode = document.getElementById('aboutPage');
aboutPageNode.scrollIntoView({behavior: "smooth"});
}, 0);
}
I have multiple button on the screen , I want that user either click this button to route to the new item or user could have close this , for that i have given the close icon within the button so that user can close that if they want , but when i am trying to give onclick function to the icon within the button it does not work
how could i do that ???
Here is the demo code
https://codesandbox.io/s/material-demo-rbkr8
try wrapping it with a div onClick like this?
const doSomething = () => {
alert('click here');
}
<div onClick={doSomething}>
<DeleteIcon className={classes.rightIcon} />
</div>
I have created a button at the bottom of the page which when clicked open a modal.
Now I have a button in a header. I want that when we click on that header button it should too open the modal. That is how can we use the same function which is used for the button which is at the bottom of the page.
Button clicks should set state. State decides if modal is shown
One way of doing it with hooks is having the buttons set state with a boolean value that decides if the modal is shown.
const Component = () => {
const [modalOpen,setModalOpen] = useState(false)
return (
<div>
<button onClick={setModalOpen(true)} >
Open Modal 1
</button>
<div>
Your other content
</div>
<button onClick={setModalOpen(true)} >
Open Modal 2
</button>
<Modal show={modalOpen} />
</div>
)
}
I want to open a new page in the same tab on clicking middle mouse button.
Here is what i am trying to do...
I have a card component that contains image and footer. When i click middle mouse button on image it should open a new page in the same tab. It opens the new page in the same tab if i click left mouse button. However on clicking middle mouse button it opens the page in new tab...I want to prevent that. Below is the code.
render = () => {
return (
<div className="card">
<Link style={{textDecoration: 'none'}} to="/card/new">
<div>
<Image
/>
</div>
</Link>
<div className="footer">
<div className="info">
<h4>{model.modelname}</h4>
</div>
</div>
</div>
);
};
Can somebody guide me how to prevent the page from opening in new tab on middle mouse click? Thanks.
You can add a mouseDown event and then detect the middle button click like
handleMouseDown = (e) => {
if(e.which === 2) {
// do something on middle mouse button click
}
}
You code might look like
class MyComponent extends Component {
handleMouseDown() {
if(e.which === 2) {
// do something on middle mouse button click
// like this.props.history.push('/card/new');
}
}
render() {
<div style={{textDecoration: 'none'}} onMouseDown={this.handleMouseDown} />
}
}
export default withRouter(MyComponent);