A syntax question when inserting two expressions in onClick.
With one expression, this works:
<Button onClick={this.A}>Push me</Button>
But when I add a second expression in the following ways, it no longer works:
<Button onClick={this.A; this.B;}>Push me</Button>
or
<Button onClick={() => {this.A; this.B;}}>Push me</Button>
or
<Button onClick={() => {this.A(); this.B()}}>Push me</Button>
tia
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'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 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.
I have a
<button
class="tw-text-btn test-work-btn"
translate translate-attr-name="add_food"
ng-click="add_food()"
ng-show="Permissions.allowed">
<i class="icon-add-food"></i>
</button>
which works perfectly if Permission.allowed is true, button will show.
However, same thing does not work in this case:
<button
class="btn"
title="{{'remove_food'|translate}}"
ng-show="Permissions.allowed"
ng-click="removefood($event, u)">
<i class="icon-cancel"></i>
</button>
also side note, in second case if i have food.$attributes.favfood_id !== myself i should use ng-if="food.$attributes.favfood_id !== myself && Permissions.allowed"
but it still does not work even in that case, what am I missing..?
i want to change class btn-white to btn-primary for the selected Button
$scope.SelectedCombination = function (combinationId) {
$scope.selectedCombination =combinationId;
};
html
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId)" type="button">{{combination.name}}</button>
use ng-class.don't use any javascript function to set css.
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);clicked=true;" ng-class="{btn-primary:clicked}" type="button">{{combination.name}}
</button>
or you can use best approach:
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);" ng-class="{'btn-primary':selectedCombination==combination.combinationId}" type="button">{{combination.name}}
</button>
see plunker
There is something called Ng-Class. Ng-class,allow you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.class