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.
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>
Sorry for the beginner question, I am new to Vue.js. I am using CoreUI. Documentation/Tutorials on CoreUI+Vue are scarce.
I am using the <CForm> tag and here I have a <CSelect> tag.
<CForm #submit="test" ref="form">
<CSelect
label="Pick a name"
:options="['test', 'test1', 'test2']"
v-model="testy"
/>
<CButton type="submit" size="sm" color="primary"> Submit</CButton>
</CForm>
JavaScript:
methods: {
test(e) {
console.log("test");
debugger;
e.preventDefault();
}
}
When my breakpoint is hit and I inspect this.testy it will not return the value of the select box but instead this:
I was under the impression that putting v-model on my CSelect will expose my select box under this.* and I could somehow easily get the value (?!).
For context this is rendered in the DOM:
<select id="uid-wvkj98yh6gp" class="form-control">
<option data-key="0" value="test"> test </option>
<option data-key="1" value="test1"> test1 </option>
<option data-key="2" value="test2"> test2 </option>
</select>
My question: inside my test(e) method, how can I gather the current selected value of my select box?
In the <CSelect> API docs, it lists the value prop:
value
The value of select input. Set .sync modifier to track prop changes.
It seems they don't use v-model as expected and you probably also got an error about the value prop being incorrect.
Change your select to:
<CSelect
label="Pick a name"
:options="['test', 'test1', 'test2']"
:value.sync="testy"
/>
This way you use the .sync modifier the way the guide directs.
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
i'm trying to add placeholer to select element in react. At this moment im using:
<option disabled selected hidden>{props.placeholder || "Select options"}</option>
But i'm getting warning:
Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
I have already tried defaultValue and few others, but nothing works.
Cheers,
Daniel
In React, you don't add the selected attribute to the option-tag, but you need to specify a defaultValue prop (Uncontrolled Component) or define the value prop (Controlled Component) in your select-tag.
Here is an example of uncontrolled:
<select defaultValue="apple">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
I am using AngularJS, and Select2 to create a nice dropdown menu.
I've included an ng-click in the Option tag (of the Select tag). However, the ng-click does not seem to be working when in a Select2.
<select ui-select2 >
<option ng-repeat="car in myGarage" ng-click="ride(car)">
{{car.Name}}
</option>
</select>
It also doesn't seem to work when using a normal Select tag.
How can I get them to work?
JSFiddle:
use ng-change and ng-model instead of ng-click
<select ui-select2 ng-change="ride(car)" ng-model="car">
<option ng-repeat="car in myGarage" value ={{car.Name}}>
{{car.Name}}
</option>
</select>
That is the incorrect way to use a select.
First off, there is ng-options attribute to a select that needs to be used instead of ng-repeat on the options.
Secondly, instead of using ng-click, you can assign a ng-model to the select that updates with the selected car as follows:
In your controller, you need only the following model and you can remove other models
$scope.myGarage = [
{
Name: "Toyota 86"
},
{
Name: "Hyundai Genesis Coupe"
},
{
Name: "Nissan GTR"
},
{
Name: "Veyron"
}
];
In your view, use ng-options and ng-model as follows:
<select ng-model="selectedCarUI" ng-options="car.Name as car.Name
for car in myGarage" ui-select2>
</select>
Using UI-Select2 - Car: {{selectedCarUI}}
<select ng-model="selectedCarNormal" ng-options="car.Name as car.Name
for car in myGarage">
</select>
Using Normal Select - Car: {{selectedCarNormal}}
This should now work. Here is a fiddle for the same
The OP is using angular-ui select2. The following is from the angular-iu/ui-select2 website:
"ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead."
See the "Working with dynamic options" section at https://github.com/angular-ui/ui-select2
So ng-change is probably the best option.
I don't know if is a lit bit late but i just discover how to make it work:
1) I'm using the original Select2
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
2) the html goes as follows:
<select class="form-control js-example-basic-single"
ng-options="item.label for item in yourVector"
ng-change="yourFunction(item)" ng-model="item">
</select>
3) the script at the end of the template:
<script type="text/javascript">
$(".js-example-basic-single").select2();
</script>
it works for me :)