for example if we take a number 100 and the user has three fields when user enters a number say 20 in one of the fields the other two fields should populate with the numbers 40 and 40 as 40+40+20 = 100. Unable to think of a logic which would help me solve this.This is just an example, the number of fields can be considered as N where N = 1,2,3,4 etc .
Seems straightforward, so I might be overlooking the point?
So, first we get whatever element the user interacted with. We could use either onChange, which will fire everytime the user changes the input, or onBlur which fires when the element loses focus, i.e. submits the form or selects the next input. Then we simply get the event.target.value, which in your presented case is 20.
Get the rest of the inputs by either storing a ref to their parent and getting said parents .children, or by using document.querySelectorAll(".some-selector"), iterate over the nodelist, skip any entry with a .value !== null and add 100 - 20 / (nodeList.length - 1) as the .value of the remaining entries.
I would probably use the ref route.
Related
I want to give a min value of 0 and a max value of 100, In between those values user can type, otherwise in between user cannot type. I tried validating the data when the onTextChanged events trigger but the UI is re-rendered giving the effect I don't want. I want the same result as when I use the maxLength prop. When the user enters 98, I don't allow them to enter more characters (eg: 988) and then validate and reset the old state => 98. I want to check that when the value is 98, the user cannot enter more characters which means maxLength = 2.
What's the solution for this issue? I appreciate your help!
you can use yup to validate text input and show error code
I'm doing a React/Redux project, and need to implement a virtualized/infinite-loading list. react-virtualized seems intended to do the job, but even after reading all of the available docs and reading a number of StackOverflow posts, I haven't been able to get it working or found a clear explanation of the mechanics of how the components actually work.
The primary examples I've looked at are:
https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md
https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#examples
The primary issues I'm running into are:
It's very unclear how the loader is triggered to make a call to loadMoreRows() in the initial load/render case. Typical scenario is that we'd design the component to initialize itself with data by calling loadMoreRows() when it's initially rendered. The config values necessary to make this happen aren't obvious.
It's not clear whether the rowCount property is intended to represent the current state of loaded rows (the number of rows in a block/page of data), or the total count of the full set of row data. And, in either case, these can't be known in advance of making the initial AJAX load call, so what's the intention for setting the initial value of rowCount?
I've tried putting the code from various examples into my project, but I never see the loadMoreRows call being made. I think what's need is a fleshed-out example that demonstrates a very typical use case of a) initially rendering an empty List, which then triggers an initial data load call; b) updating the rowCount property, and when/where to do this; c) managing the currently-loaded data set representing the current block/page of data.
Any pointers would be much appreciated.
loadMoreRows is passed as a prop to InfiniteLoader (you can see that in the examples). It isn't meant to be called manually, it is used internally by InfiniteLoader and List, and is called automatically when scrolling down.
rowCount can have both of those behaviours. Your API could tell how many items there are without fetching them all, or it could not. rowCount simply tells List how many rows there are.
So for example, let's say we have 100 stores, and our first fetch gives us the first 10. That same response should say if there are more stores to be fetched still or not. Another fetch could tell us there are 100 stores total.
With this, we could use the total of 100 as rowCount (by querying the total number of stores, without fetching them all) OR we could use 10 + 1 as rowCount, as the first fetch told us there were still more stores to be loaded yet.
What would this mean?
If we have the first 10 stores loaded, and use rowCount = 100, InfiniteLoader would display 100 rows, but only the first 10 would have any content at all, with the rest of them showing the "loading" row placeholder component. And as that 'not yet loaded' rows appear as you scroll down, InfiniteLoader would call the loadMoreRows function to, well, load more rows.
In the other hand, if we had used rowCount = 10 + 1, InfiniteLoader would display only 11 rows, with only the last one being the "loading" row placeholder component. And when loadMoreRows is called, rowCount would be items.length + 1 === 20 + 1.
Summing up
loadMoreRows isn't meant to be called manually. It is called automatically by InfiniteLoader when a row that isn't loaded is being shown in the viewport. So initially rowCount could be just 1, no row would be loaded, and loadMoreRows would be called.
rowCount could either be currentItems.length + (moreToBeLoaded ? 1 : 0) or totalItems. The difference being what is shown to the user, either "Oops, end of what is loaded, wait some for more" or "Look, these are all the items there is, but haven't been loaded yet, wait some for them to load"
I was trying to understand the usage of keys in React and found this link https://coderwall.com/p/jdybeq/the-importance-of-component-keys-in-react-js where 3 scenarios are explained.
Using indexes for keys
Using of Random Unique Number for keys
Using of constant Unique Numbers for keys
<input key={item} id={item} defaultValue={item}/>
In the example, when I used value instead of defaultValue, I see different behaviour (Change in last DOM value not reflecting if new item is added).
Can any one explain the behaviour in three scenarios in the example.
You can find the code here
To explain you the three cases with respect to your input case
First: indexes for keys,
When using indexes for keys, the only problem is that if you re-order the data or day delete the data in between, a lot of elements needs to re-render as the key to component mismatch is happening and during reconcilation React is not able to compare elements correctly
Second: Using random number as keys
Using random number in render is worst possible idea for setting keys, as each time render is called, a new random key is generated and assigned to the component and hence the entire DOM elements will be reconciled and re-rendered. With input another issue is that each time you change a value, a re-render is triggered and since the elements are recognized differently because they have different keys, the input loses focus
Third: Using of constant Unique Numbers for keys
This is the best case scenario, as even though the elements are re-ordered or some elements are deleted from the middle of the array, the previously rendered item will always hold the same keys and hence during reconcilation only elements that changed will be re-rendered
I have a page full of mc_card's and want the user to choose which ones to add to their deck.
click a card and cardChosen = true for that card;
click again and cardChosen = false;
This works fine.
Upon choosing a card the frame number is stored in an array. Each card is on a separate frame and there are no duplicates.
Main.cardArray.push(this.currentFrame);
Upon clicking it again, I want to remove that frame number from the array:
Main.cardArray.splice(this.currentFrame, 1);
After I splice the array, I trace it, and I'm getting weird results. Sometimes it works like I would expect, but then it removes the wrong numbers and sometimes doesnt remove them at all.
splice() works in another way, that you try to use.
Here is statement:
splice(startIndex:int, deleteCount:uint, ... values):Array
So, first arg - start index in array to delete, and second arg - how much elements must be deleted from the start index.
I want to develop a custom user control in WPF which has some sort of mask. this functionality is very like the one provided in many online applications where u enter your credit card number and next time whenever u sign in to your account u see only last for digits of the card number (something like ***4587) but while I display data in this way I want to keep real value unchanged so inside binding I will access full data.
You could try something like this:
string originalNumber = textBoxOriginalNumber.Text;
int numberOfDigits = textBoxOriginalNumber.Text.Length;
string hidden = new String('*', numberOfDigits-4);
textBoxModifiedNumber.Text = hidden + originalNumber.Remove(0, numberOfDigits-4);
It's is not an elegant solution but will help you if anybody else give you a better solution. Basically, it takes the original credit card number, counts how many digits it has, removes the "n-4" first digits, then show the * symbol "n-4" times plus the four last digits. This will work no matter how many digits the original number has.
Additionally, I'm not sure if a mask (or the Regex suggested by the other user bellow) would work because (if I understood it well) it would replace the whole number, instead of show the last 4 digits.
OK here is the way I resolved that issue. after working with Card numbers I wanted to work with ID and SN numbers as well so what I did was just wrote little method which takes in string and returns masked value here it is in case someone needs this in feature.
public static string GetMaskedNumber(string unsecuredNumber, char maskChar)
{
return unsecuredNumber.Substring(unsecuredNumber.Length - 4)
.PadLeft(unsecuredNumber.Length - 6, ' ')
.PadLeft(unsecuredNumber.Length, maskChar);
}
You could use Regex.Replace with \d to indicate a digit
i.e.
var digits = new Regex(#"\d");
modifiedNumber = digits.Replace(originalNumber, "*");
Or if you want to update the whole set of numbers except for the last group
#"\d{4}-"