I am developing my first project on React an I need a select option to sort some items. I did the sorting and it works fine but in Chrome when I select an option nothing happens. I did the same thing with a button and it works but with option it wont.
My example (it won't console.log on Chrome but it does on Firefox):
<select name="sort" id="sort">
<option value="ascending" onClick={() => {
console.log("clicked");
//actually I am calling a function here
}}>
Ascending
</option>
</select>
You need to use onChange on select tag not on option tag
Use like this
<select name="sort" id="sort" onChange={handleChange}>
<option value="ascending">Ascending</option>
<option value="descending">Descending</option>
</select>
function
const handleChange = e => {
console.log(e.target.value);
};
Check this live example - https://codesandbox.io/s/amazing-monad-vdto2
Related
Seeing this warning in React
Warning: Use the defaultValue or value props on instead of setting selected on .
What does it implies?
It's basically a warning that encourages you to change your code from doing <option selected> to doing <select defaultValue="theValue"> or using a controlled select.
It's probably because React wants to keep consistency between the Form components.
Edit: you can probably implement it this way using useState hook and a controlled select:
const [value, setValue] = useState("defaultValue");
...
<select value={value} onChange={(e) => {setValue(e.target.value)}}>
<option value="defaultValue"> Default </option>
<option value="otherValue"> Other </option>
</select>
I'm making an app that uses a dropdown menu like:
<select name="color">
<option value="red" onChange={this.func}>Red</option>
<option value="blue" onChange={this.func}>
Blue
</option>
</select>
However, the onChange function is not working. The function given is:
func = () => {
console.log("Color");
};
I'm wondering why is this not working? What should be done to make it work?
Thanks in advance.
Your code does not work, because selects fire onChange events, and options don't. You need move the onChange event handling to the <select/>:
<select name="color" onChange={this.func}>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
// and for your func:
func = (event) => {
//event.target.value contains the selected option value, e.g. "red"
console.log("Color: ", event.target.value);
};
Is it even possible to do select with links that when you click submit button it will move you to the selected website, for example
<form>
<select>
<option value="1"> test 1 </option>
<option value="http://www.google.com"> google.com </option>
<option value="http://www.youtube.com"> youtube.com </option>
<option value="http://www.facebook.com"> facebook.com </option>
</select>
<input type="submit">
//when submit clicked, and you choosed any option then you will be moved to this website
</form>
Yes, it possible to have a <select> element with links opening after clicking submit.
In order to do so, add the following JavaScript code:
const submitButton = document.querySelector("[type=submit]")
const select = document.querySelector("select")
submitButton.addEventListener("click", function (e) {
e.preventDefault()
window.location.href = select.value
})
Using a bit of javascript you could add a change handler to the select that navigates the user to the value of the selected option.
Note that this may not work within the stackoverflow demo frame, but should be fine on your site.
document.querySelector('select').addEventListener('change', (e) => {
document.location.href = e.target.value;
});
<select>
<option value="1" id="1"> test 1 </option>
<option value="https://www.google.com" id="http://www.google.com"> google.com </option>
<option value="https://www.youtube.com" id="http://www.youtube.com"> youtube.com </option>
<option value="https://www.facebook.com" id="http://www.facebook.com"> facebook.com </option>
</select>
I've read about both react forms and react two way binding helpers.
But I can't find any saying about how to implement two-way bindings with select elements.
I've tried like:
render: {
var selectValueLink = {
value: this.state.selectedValue,
requestChange: this.handleChange
};
return (
<select valueLink={selectValueLink}>
<option value={'A'}>OPTION A</option>
<option value={'B'}>OPTION B</option>
<option value={'C'}>OPTION C</option>
</select>
);
}
but this.handleChange doesn't get fired when I manually change selected options via mouse clicks.
Is there any way to use React's valueLink nicely with select elements?
Here is an example with select element and everything seems to be working http://plnkr.co/edit/3ueB63nxJ4wwV8rSIusr.
I have a problem with my site. I have a select menu and 3 options: images, video and audio. When I click one of the options it should display a button to pick out the image/video/audio to upload, but this doesn't display in Google Chrome. In Firefox there is no problem with this. Does anyone have a solution for this?
Thanks very much!
EDIT:
This is the code
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>
things i modified:
the second parameter is now a class name, each value separated by a "|"
used onChange() to trigger a selection (but does not trigger unless the value changes)
used this to pass a reference to the select rather than passing values (you can do more this way)
demo here
<select name="service_id" onChange="showSection(this)">
<option value="video" class='image|audio'>Video</option>
<option value="image" class='video|audio'>Imagini</option>
<option value="audio" class='video|image'>Audio</option>
</select>
<script type="text/javascript">
function showSection(el){
//modified to get the first and second parameters of showSection()
//get the value
var firstParam = el.value;
//get the class name of the selected element, and split it
var secondparam = el.options[el.selectedIndex].className.split('|');
console.log(firstParam);
console.log(secondparam);
}
</script>
Call the function on select not in options:
<select onClick='showSection(this.value,"a")'>
<option value="video" >Video</option>
<option value="image">Imagini</option>
<option value="audio">Audio</option>
</select>
i have tested this in chrome its working alright.
one suggestion is if you are using dropdown then use onchange event rather then using onClick
<?php
$videos=0;
$images=0;
$audios=0;
?>
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>