Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 months ago.
Improve this question
I'm learning React and as part of that I have tried some code for making a notebook kind of app where I get to add notes and then they are displayed dynamically
When I'm trying to add a note, the new react component(note) is getting displayed but immediately getting disappeared. As if the entire browser is refreshed. Attaching my code. This is my first time asking the question so not even sure how of it was understandable.
https://codesandbox.io/s/keeper-part-3-starting-forked-0mf1cs
For most of the modern browsers the default type of button tag is submit (https://stackoverflow.com/a/31644856/7399478). So, the form is submitted when you click the button and the page is refreshed after submit.
You need to change add type="button" to your button tag in your CreateArea.jsx component in order to prevent submitting the form like:
<button
type="button"
onClick={() => {
props.onAdd(note);
}}
>
Add
</button>
You can take a look at this forked sandbox for the live working example.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am using react-day-picker library to for date rage picker react-day-picker library url but I want to show this calendar on my button click event. How to achive this.
how about setting a flag before rendering the component by using the state?
ex.
a button click can call renderCalendar method
renderCalendar(){
this.setState({showCalendar:true})
}
and instead of doing :
<DayPicker numberOfMonths={2} />
wrap it inside a conditional statement
{ this.state.showCalendar ?
//show the calendar
<DayPicker numberOfMonths={2} /> :
//Do not show the calendar
null
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
Is there any reason that this attribute tag a[h2]{color:orange;} wont work in css? I Cant seem to get the attribute tag to work for any elements.
a[h2] {
color:orange;
}
Means that all <a> tags that have an attribute called h2 will be coloured orange; i.e. <a h2="whatever">hello, world!</a>.
This is probably not what you want, both because this would be invalid HTML (h2 is not an attribute of <a>, and custom attributes are only allowed if they start with data-), but also because I am assuming that you want to target <h2> tags that are inside of your <a> tags.
To that, use the following code:
a h2 {
color:orange;
}
That will colour all <h2> tags inside of <a> tags orange.
Read more about CSS Selectors here.
Did you make a reference in the html page to your stylesheet?
<link rel="stylesheet" type="text/css" href="theme.css">
If this is done, check whether the element has an h2 attribute. Something like <a h2="value">
I have 2 nav-tabs , one of them shows the list of available items and the other tab gives a form where you can add the item details.
All the item details gets saved in database of submission of the form. If there is error the form submission fails and we send out 500 error code.
Now the problem is when i submit the form and the details are saved in database successfully i want to change the tab from Create to Edit.
Can anyone please tell me how can i achieve this?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have the following click handler:
<Select
name="batchCompChooser"
value={this.state.batchCompId}
options={batchCompItems}
clearable={false}
onChange={this.handleBatchCompChange()}
/>
However, I get the following error from the onChange line:
BatchComponentChooser.js?0aaf:54 Uncaught TypeError: Cannot read property 'value' of undefined
How do I fix this?
If you have an event handlers, such as onClick, it is easy to accidentally do this:
onClick={this.someFunc()}
REMOVE THE parens ()
That will actually invoke the function immediately on render.
Instead you want to pass a reference to a function like this:
onClick={this.someFunc}
So in my case it should look like this:
<a onClick={this.doSomething}>Do something link</a>
If you need to pass parameters, you can do it like this with the arrow function:
<a onClick={() =>this.doSomething(true)}>Do something link</a>
Specifically in the example above the onChange should have the trailing parens removed, it should be changed to:
<Select
name="batchCompChooser"
value={this.state.batchCompId}
options={batchCompItems}
clearable={false}
onChange={this.handleBatchCompChange}
/>
Hope that helps someone out there...
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to figure out how to implement the "android" feel on Onsen-UI by using the 'swipe' navigation.
I tried implementing idangerous swiper, but not having much luck. My idea is to combine:
http://codepen.io/negibouze/pen/jEvOYz
enter code here
http://codepen.io/negibouze/pen/wBLeyp
enter code here
When you swipe, the tabs change but has that swipe animation/effect. I also would love it if each tab/swipe was a different html and not one index file.
Any ideas or help?
Great question. There are two different approaches:
As it's done in your second example, using tabbar and gesture detector. Onsen 2.0 has a slide animation for tabbar, so you just need to add <ons-tabbar animation="slide" ... >. Onsen 2.0 is still in alpha version but it will be released in the upcoming weeks. The drawback of this approach is that the slide animation starts after the swipe action is completed.
You basically add your ons-tabbar element and then configure the gesture detector as follows:
ons.ready(function() {
// Create a GestureDetector instance over your tabbar
// The argument is the actual HTMLElement of tabbar, you can also do document.getElementById(...)
var gd = ons.GestureDetector(myTabbar._element[0]);
gd.on('swipe', function(event) {
var index = myTabbar.getActiveTabIndex();
if (event.gesture.direction === 'left') {
if (index < 3) {
myTabbar.setActiveTab(++index);
}
} else if (event.gesture.direction === 'right') {
if (index > 0) {
myTabbar.setActiveTab(--index);
}
}
})
});
Working here: https://jsfiddle.net/frankdiox/o25novtu/1/
Combining ons-tabbar and ons-carousel elements. The drawback of this approach is that ons-carousel-item cannot get a template or separated file (check the comments to find another workaround to this).
ons-tab requires a page attribute and you cannot leave it blank without errors in the console, but we can use ons-tabbar's style instead of the actual component: http://onsen.io/reference/css.html#tab-bar
We combine it now with a fullscreen carousel like the one you mentioned and add the next CSS to make the page content respect our tabbar so it does not fall over or behind it:
ons-carousel[fullscreen] {
bottom: 44px;
}
Next step, we link every tab with its corresponding carousel item:
<div class="tab-bar" id="myTabbar">
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(0)">
...
</label>
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(1)">
...
</label>
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(2)">
...
</div>
And so on. This will make that when we click on a tab the carousel changes automatically. Now we need to do the opposite connection: update the checked tab when we swipe the carousel. The tabbar is basically a set of radio buttons, so we just need to get the one we want in the carousel's postchange event and check it:
ons.ready(function(){
carousel.on('postchange', function(event){
document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true;
});
});
You can now change the content of every carousel-item-index and insert an ons-page with anything you want.
Working here: http://codepen.io/frankdiox/pen/EVpNVg
We may add a feature to make this easier in upcoming versions of OnsenUI.
Hope it helps!