I have a table who's header contains a row of selects. I am trying to display the selections under their respective selects however the selections only show under one of the selects. Im not sure whats going wrong here.
I have a working example here: https://codesandbox.io/s/table-with-multiselcts-fwhsus?file=/src/App.js
In my code the selections are updating underneath the first select when I change any one of the selects. Can anyone explain this?
You used the same onChange callback.
The problem is in the parameters of this function.
field is not a string, it's an object.
So in the switch statement, only default case is executed.
It would be better to set onChange callback respectively.
onChange={e => setLocation(e.target.value)}
onChange={e => setPractice(e.target.value)}
...
Related
I am currently using react-select library to my project
react-select
This is my create invoice page, Please check below view,
When user select the PO drop down, red colored text boxes are automatically filled. It is working well.
This is my invoice list page view
When user click the action button, data passed and redirect to the create invoice page. Currently object passed and PO number set correctly. but other fields did not filled automatically.
PO NO is set correctly. But on change function did not fired and did not set other text box values.
This is my drop down and onchanges function.
<Select
options={options}
value={values.purchaseOrderNumber}
onChange={onChange} onFocus={onChange}
name="purchaseOrderNumber"
/>
const onChange = (selectedOP) => {
setInputValue(selectedOP);
loadselectedValue(selectedOP);
//handleChange(selectedOP);
console.log(selectedOP);
};
I know this codes not enough to give better solution. but if you can please tell me the correct path to do this using react hooks. thanks
I'm using react JS and I have a problem. I don't know how to get the value from my dropdown and put that value into a onclick button. I have read lots of topics but I haven't find anything really useful for a beginner like me.
I am using "scheduler" that helped me built my dropdown and some other stuffs.
So, my dropdown get data from a local file and looks like this:
{values.map(v => (
<option value={this.value}>{v.value}</option>
))}
console.log(ref)
And my button is like this:
<Button onClick={() => this.decrement()}>
Ajouetr la réservation
</Button>
The decrement method was only there to test if it was working, and it is.
Actually, what I want to do is quite simple: I have some values in my dropdown (from 1 to 7). And I have a state that says there is 30 places available. What I want is when I choose a specified item in my dropdown AND validate with my button and then my state to decrement with the specified number. Because right now it only decrement with 1.
I hope it's clear enough for someone to help me, because I spent 2 days on that problem and I don't know what to do.
Thank you :)
Next time, it's nice to provide an interactive example with your question. Here's a CodeSandbox I made that (I hope) illustrates your example (link). If you want to fiddle with the example, just click "Fork" in the top right corner.
Back to the solution:
I think what you're missing is storing the selected value in your state along with the 30 "places". What you want is to make your <select /> tag into a "controlled component". When someone interacts with the <select /> you want to change the internal state so that it matches the selected value. That way, when you call decrement() from your button, you can use the internal state's value rather than getting it from a ref (I think that's what you were trying to do).
Here's a link to the React doc that explains how to use forms, specifically the <select /> tag: (link).
Take care!
I would say that you can think about this in 2 different steps:
SET THE QUANTITY STATE
Set the state with the current dropdown value - For achieving this, you can just use the onChange method in your select:
<select name="quantity"
value={this.state.quantity}
onChange={this.onSelectQuantity}
>
In your constructor, you create a variable quantity inside your state
Create a function called onSelectQuantity where you will set the quantity state with setState.
Do not forget to bind the function onSelectQuantity on the constructor.
With this, every time that you change the value on select, your state would capture its value. You can log it from the function if you want to test if it works.
DECREMENT FROM THE BUTTON
After this, you can just decrease the value of the state again from decrement function
<Button onClick={this.decrement}>
Ajouetr la réservation
</Button>
You will have a function...
decrement() {
const newQuantity = this.state.quantity - 1;
this.setState({
quantity: newQuantity
})
}
Hope it helps!
I am creating a cascading kind of layout where I have two Select components for Roles and Users, the functionality I want is working fantastic except a use case where upon clearing/removing a role or clearing all roles, the Users Select component is not clearing the MultiValue items however the dataset is being cleared properly.
Please guide me as to how to achieve the said functionality, may be I am missing something or probably some kind of issue.
Here's a code snippet - https://codesandbox.io/s/l98n1o6lq7
You can control it via value attribute on Select in react-select. Following is the code you can try and manipulate accordingly -
<Select
closeMenuOnSelect={false}
isMulti
options={showUsers}
value={showUsers}
hideSelectedOptions={true}
backspaceRemovesValue={true}
/>
Working Demo - https://codesandbox.io/s/9z02ql079p
I have a list of checkboxes in my React App. When I hold Shift key and click one - the others between current and the nearest checked one should become selected.
For now I'm tring to do somethimg like this:
<input onChange={(e)=>this.handleCheckbox(e)} value={id} checked={this.state.selected.IndexOf(id) > -1} type="checkbox" />
handleCheckbox(e){
if(e.shiftKey){
console.log("shiftKey is hold")
}
//here goes some logic to save checkboxes in the state
}
But the condition if(e.shiftKey) is never executed. What am I doing wrong?
For future visitors:
To check if the Shift key is pressed, check the e.nativeEvent.shiftKey in the click event.
You still have to implement the logic for actually checking the boxes. If you need help with that, let me know.
Hope this helps.
onChange is trigged after you let the key up. You should use the onKeyDown event.
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page