I am trying to use onclick event like below
<button className="mini ui button" onClick={this.view(item['id'])}>
<i className="user icon"></i>
View
</button>
This is creating error like below
But below code is not creating error
<button className="mini ui button" onClick={this.view}>
<i className="user icon"></i>
View
</button>
Change it to onClick={() => this.view(item['id'])}, otherwise the function gets executed immediately during rendering (instead of onClick), which causes repeated re-rendering if the function changes the state/props.
Yes you can use arrow function as previews answer or you can use bind
<button className="mini ui button" onClick={this.view.bind(this, item['id'])}>
<i className="user icon"></i>
View
</button>
These two ways works.
Related
I investigated a lot of topics about using button as a link but didn't found a solution for me - I need to open a certain page in a new tab using React bootstrap button.
<Button onClick={() => onClickOpenVacancy(id)}>
React bootstrap offers a prop 'href' but no info how to open in new tab. Any suggestions, please?
You should use href and target together:
<Button href="URL" target="_blank" onClick={() => onClickOpenVacancy(id)}>
It looks like they just leave target with type any without further documentation. It just works the same way as the attribute that exists on the usual <a> tag does.
You could add the button inside the anchor tag
<a href='https://example.com/' target="_blank">
<button className="test" onClick={() => onClickOpenVacancy(id)}>
Click Here
</button>
</a>
or
<button className="test"
onClick="window.location.href = 'https://example.com" target="_blank">
Click Here
</button>
or..not really needed for you still a way would be
<form action="https://example.com/" target="_blank">
<button className="test" type="submit" onClick={}> // onClick not needed
Click Here
</button>
</form>
If onClickOpenVacancy was meant to do the redirection, then you don't need onClick function. the href and target are enough.
Pass in the complete URL in this code snippet and it should work
<Button onClick={() => window.open(URL, '_blank')}>ID</Button>
It's nothing specific to library like bootstrap, etc
I am wondering if I could stop all spin to appear when only one delete button is click? Right now when I click on one of the delete buttons, all the spinners appear on all the delete buttons which should have been only the delete button that is performing the action. How should get this to work? Here is my code:
<ul class="list-group">
<h5>Schedules</h5>
{scheduleData.map(items => {
return (
<li key={items._id} class="list-group-item">
{moment(items.startdate).format('MMMM DD, YYYY')}{' '}
<span style={{marginRight: '0.2rem', marginLeft: '0.2rem'}}>
to
</span>
{moment(items.enddate).format('MMMM DD, YYYY')}{' '}
<span style={{float: 'right'}}>
<button
className="btn btn-primary"
onClick={event => deleteSchedule(event, items._id)}
>
{' '}
{loading && <i className="fa fa-refresh fa-spin"></i>}
Delete
</button>
</span>
</li>
);
})}
</ul>
Many thanks in advance and greatly appreciate any helps. thanks
Assuming that loading is a Boolean variable you set true in deleteSchedule, to achieve the result you have to create a loading parameter for every entry.
IMO the best approach would be to create an indipendent element in which you set loading with useState hook. You should pass deleteSchedule to this element and then when button is clicked it should call setLoading(true) and call deleteSchedule.
Other option would be to create a loading list and insert the id of the element which button was clicked in this list then loading would become loading.includes(items._id).
Or you could iterate scheduleData and add loading attribute to every element.
I'm trying to incorporate Semantic-UI into my site due to some apparent limitations with react-strap. However, I've run into an issue. The content width is fixed, and therefore the rightmost button is getting slightly truncated.
I tried resizing per the docs:
<div>
<Button size='mini'>Mini</Button>
<Button size='tiny'>Tiny</Button>
<Button size='small'>Small</Button>
<Button size='medium'>Medium</Button>
<Button size='large'>Large</Button>
<Button size='big'>Big</Button>
<Button size='huge'>Huge</Button>
<Button size='massive'>Massive</Button>
</div>
But nothing seems to make a difference here the code:
<Button.Group>
<Button class="tiny ui button" positive as={Link} to={"/licenses/" + license.id}>Edit</Button>
<Button class="tiny ui button" color='blue' onClick={() => this.download(license.url)}>Download</Button>
<Button class="tiny ui button" negative onClick={() => this.remove(license.id)}>xDelete</Button>
</Button.Group>
Any ideas?
You need to use the same attribute as per the docs - instead of giving your buttons a class of tiny, it should be a size of tiny.
I use reactstrap. I have this kind of <button> with an icon inside :
{this.props.mode === "update"
?
<Button
className="btn btn-danger btn-sm"
onClick={() => this.deleteQuestion()}
>
<i className="fa fa-trash"></i>
</Button>
: null
}
If I click on the icon, the function in not triggered.
If I click outside the icon (but inside the button), the function is triggered.
What is this mystery? I am a beginner in React and react-strap.
The reason it behaves this way is because icon captures click before it is propagated to the button. The easiest way to fix this is to add the following in your css
.btn i.fa{
pointer-events: 'none';
}
it will fix it for all the buttons in your project
There is a concept called event capturing and event bubbling in JavaScript. Take a look at Event Capturing and Event Bubbling. This concept helps you overcome the problem that you're facing currently.Take a look at this. You can add the same function onClick to the icon too. This will help you as well!!.. There are so many design templates available you can try those too. For eg. There's Ant Design. Hope it helps!!.. Happy Coding!!
I am trying to disable a button on certain condition. I tried to use data-ng-class but when I change the tabs or switch between pages the buttons are getting activated intermittently. Would like to understand how can I achieve this feature.
<button type="button" class="btn btn-success" href="" data-ng-click="saveValueSellerBid(false);" data-ng-class="{disabled: currentQuote.acceptPricingSellerDisabled}">
<svg class="icon icon-checkmark"><title>Accept value seller offer</title><use xlink:href="#icon-checkmark"></use></svg>
<strong translate="Accept_Pricing_Seller_Offer"></strong>
</button>
Try this attribute instead:
ng-disabled="currentQuote.acceptPricingSellerDisabled"