I have an accordion title that consists of the carat, some text, and a div with some other stuff. I want the accordion to only expand when the user clicks the carat or the text, but not the extra div. Clicking on the div will do something else entirely.
I noticed that in the base Semantic-UI, you can specify a CSS selector to trigger on, but that seems JQuery specific and not doable in the react version.
Is this possible?
<Accordion.Title
active={activeIndex === 0} index={0} onClick={this.handleClick}
>
<Icon name="dropdown" />
<span className="name">{data.name}</span>
<div>some extra junk - don't expand on this</div>
</Accordion.Title>
Your onClick event is attached to the Accordion.Title itself. That means when you click that component, your handleClick function will fire. If you want the handleClick function to fire when clicking the Icon then you need to move your handler function to that component instead.
<Icon
name='dropdown'
onClick={this.handleClick}
/>
Related
Trying to build a D.R.Y. list of vocabulary terms with React Bootstrap (v.2.2.3) using Bootstrap 5.1.
I bring in my data:
import vocData from '../data/vocData'
My component:
const VocList = () => {
const [show, setShow] = useState(false)
const handleClose = () => setShow(false)
return (
<ul className="list-inline">
{Object.keys(vocData).map((item, key) => (
<React.Fragment key={key}>
<li className="list-inline-item voc-item">
<Button>
<small>{vocData[item].title}</small>
</Button>
</li>
<Modal
show={show}
onHide={handleClose}
backdrop="static"
keyboard={false}
aria-labelledby={`contained-modal-title-${vocData[item].href}`}
centered
>
<Modal.Header closeButton>
<Modal.Title id={`contained-modal-title-${vocData[item].href}`}>
{vocData[item].title}
</Modal.Title>
</Modal.Header>
<Modal.Body>{vocData[item].content}</Modal.Body>
</Modal>
</React.Fragment>
))}
</ul>
)
}
I can see my list of vocabulary terms is working but my modal is not appearing when I click the button. I've tried to research and read through:
React-Bootstrap Multiple Modal
React-bootstrap Modal component opens/closes all modals when I map through a list
How do I get my react app to display object information in my bootstrap modal when they click on a list item?
How to use React-Bootstrap modals inside a map array method to display AJAX data on button click in React?
how to show react bootstrap modal inside the function
but I'm unable to find an answer.
How can I dynamically setState and be able to render my modal for that vocabulary term in my list?
Try to use Modal only once and not render it many times. You can show only one Modal at time anyway. I have created a subcomponent for clarity.
There are many ways how to play with state. Here the initial state is null and hides the modal. When we click on button we set state with one vocData entry. This also toggles the visibility of Modal.
Finally, when we close its again, we set our state to null. In this way we use one state for two purposes - control vision and rendering of Modal and holding data for it.
Tell me please, how to handle onclick action by ID. For example, i’ve something in hbs template:
<button id="myButton" {{action "myAction"}} >OK</button>
it has CSS:
button {color: "red";}
How to do two things by onclick action:
1. Set property to clicked object (only to clicked), eg to set CSS colour “green”,
2. Get some property of clicked (eg CSS colour), and console log or alert.
Thanks in advance!
You can connect the action to the "onclick" event of the button like this
<button id="myButton" onclick={{action "myAction"}} >OK</button>
And then the first argument of the action will be the click event, from which you can take the target DOM element.
Check out this example twiddle:
https://ember-twiddle.com/1d14560e0e979dbbdddbfee57c84601c?openFiles=templates.application.hbs%2C
I have multiple tabs in my page which link to some internal routes. When an user clicks on a tab ,the route has to be rendered and also the tab has to be highlighted but once in a few clicks the highlighting does not shift to the new tab and the old tab remains highlighted but the route of the clicked tab gets rendered.
The highlighting is done by an action inside the li tag and the #link-to is nested inside the li tag.
In my investigation till now what I have found is that the when this happens the click event is not registered. I get a bunch of mouse events but no click event. Seems like the click event is eaten up.
<ul class="nav nav-tabs">
{{# each tab in tabBars}}
<li {{action 'someAction'}}>{{#link-to tab.link}}{{/link-to}}</li>
{{/each}}
</ul>
The action should be triggered all times when a tab is click and the new tab should be highlighted.
Try to do something like this instead:
{{#link-to tab.link tagName='li'}}click me{{/link-to}}
(and omit the <li> tag).
Then you can check for the active class to highlight the li element.
The {{link-to}} helper renders a link which will get an additional class="active" if the link matches the current route. You can then style this by CSS.
See https://guides.emberjs.com/v1.10.0/templates/links/ and search for "active".
Other options
Since the {{link-to}} will trigger the tab.link route's beforeModel hook, perhaps this is the place you might want to set view-related properties to be "data-downed" to the <li>. I would personally reserve this hook for business logic.
When I absolutely need to fire an action before transitioning (usually, this is when I want to fire something like a tracking event), I use the invokeAction closure action which comes with the ember-link-action addon although it looks like might only support 1.13.13
{{link-to invokeAction=(action "someAction")}}
Best practice
For the action in the <li> element you generally want to avoid setting actions on non-interactive elements since it creates an accessibility concern for users of assistive technology (see no-invalid-interactive).
However, this doesn't mean you should turn the <li> element into an interactive element by doing something link <li role="button"> as this violates more a11y concerns (see no-nested-interactive).
I found a solution which does not involve actions:
<ul class="nav nav-tabs">
{{#each tab in tabs}}
{{#link-to tab.link id=tab.id tagName='li' }}<a>{{tab.title}}</a>{{/link-to}}
{{/each}}
</ul>
link-to masquerading as li and having a dummy anchor inside it.
I started with learning EmberJS and maybe the answer is trivial, but after some researching, I still can't find a solution.
In my model template, I have some buttons(each for the different object) which after click should expand sidebar with its details.
What do I want to reach is something like this:
Could someone provide me with some simple twiddle?
There are two ways to achieve this effect.
Using controller's variable
{{#foreach model as |obj|}}
<button onclick={{action (mut activeModel) obj}}>{{obj.name}}</button>
{{/foreach}}
<!--Somewhere later in template-->
{{#if activeModel}}
<!--Code of overlay and sidebar, close button sets activeModel to undefined-->
{{/if}}
Using child (nested) route
Parent template:
{{#foreach model as |obj|}}
{{#link-to 'parentRoute.childRoute' obj tagName="button"}}
{{obj.name}}
{{/link-to}}
{{/foreach}}
<!--Somewhere later in template-->
{{outlet}}
Child template should contain code of overlay and sidebar, close button redirects back to parent route
well, one of the options is that you can create components and pass the modified model(modify the model using onclick function) as the data to that component.
for example,
let us just say that this is your main template
<button onclick="changeSideBar()">click</button>
<div style="display:none; //render it in the left-half(using bootstrap models)">
{{sidebar-component model=model.modified}}
</div>
in the javascript code (component.js),
function changeSideBar()
{
var modified= ;//set as per your convienince by iterating actual models or by any means
this.set('model.modified',modified);
//make display of sidebar div "block"
}
sidebar-component is your component. make the component as per your wish.
hope it helps.
I can't help much without your templates or codes. It would be great if you provide some of your works.
When clicking the "edit" to trigger the action "edit":
{{#link-to "pages.show" page class="list-group-item"}}
{{page.name}}
<span class="badge" {{action "edit" page preventDefault=false}}>edit</span>
{{/link-to}}
Then the action is triggered (e.g. the edit page is opened), but in the next second the link-to redirect is done so I end up on the "pages.show" route.
Expected: Solely the action "edit" is invoked and the click event(?) is not "bubbled" to the link-to helper.
Side notes Ember 2.2 is used and the template above is part of a component.
PS: I red that using preventDefault=false inside an action would stop this type of behavior - but obviously the link-to helper gets the information from somewhere else.
What you need is called event bubbling. You can disable it by using bubbles=false inside your action helper, so your click event won't bubble up to the link-to element
{{#link-to "pages.show" page class="list-group-item"}}
{{page.name}}
<span class="badge" {{action "edit" page bubbles=false}}>edit</span>
{{/link-to}}
http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_event-propagation
preventDefault is a different thing, when setting preventDefault to false, you allow the default browser action of the DOM event.