I am working in React-redux and creating a number type field. The event.target.value returns a string, since it is number type editor it must return value as number so I parse the value to number. The problem comes when I try to enter 4.5 . Firstly, when I type 4 it will get parsed into 4 (sting to number). But when the . entered the number 4. get parse into 4 , so I just failed to enter the floating point values.
let onChangeText = (value)=> {
fieldProps.onChange(parseFloat(value));
}
If I parse the value in onBlur then it will work but for state management I have to work on onChange . Is there any way to parse 4. string to 4. number .
You could store user's literal input in your state and then apply the desired logic and store the result separately in the state of a parent element?
Here is a potential approach: translating between cents and dollars in html input in React
You can use onBlur instead of onChange. Another benefit of this approach is that you reduce the amount of Redux actions; instead of firing an action on every keypress, you fire an action when the user is finished inputting data.
This will also require using defaultValue instead of value to link your component to the data. So the component would look something like this:
<input type="number" defaultValue={this.props.value} onBlur={onChangeText} />
This means the action will only trigger when your user has finished typing input, and blurred the input element.
Related
I'm trying to validate that the form's values actually change before doing a submission, I'm using the form to perform a search also I'm using react-hook-form.
For example these are my fields: { name: 'sample1, mail: 'sample#test.com' }
I want to prevent a sumbmission if the user removes the 1 from the name and then adds it again because the results will be the same
My unique solution at the moment is to store the last values in a state (useState) and inside the submit handler compare each value to determine if something has changed
You can use useWatch or watch to get form values and disable submit button if your values equal the initial values.
My issue was that I was resetting the form after each submission using the defualt values so now I reset the values by providing the last sumbission values so any change to any field will make dirty = true
I am using NextJS, and trying to build a form to update a supplier.
I have the following input:
<input type="text"
ref={nameDisplayedRef}
className='p-2 rounded'
name='nameDisplayed'
defaultValue={supplier.nameDisplayed}
value={supplier.nameDisplayed}
/>
When the input is like this, I cannot type in to it. I have read that I need an onChange function - but I dont need an onChange function. I dont care when its changed, I care when the form is submitted.
The data provided to this input field comes from an API call made by useSWR. When I update the database, the field only updates if I have the value={} in the input field. But with it I cannot change the input text.
I appreciate that i need an onChange function but what am I supposed to put in it? It wont let me leave it empty so I am not sure what to do.
edit:
Adding nameDisplayedRef.current.value = supplier.nameDisplayed solves the problem but typescript shows an error for it in PhpStorm. But the code works at least :\
The problem is controlled vs uncontrolled inputs.
An uncontrolled input is when an input handles value and change on its own.
A controlled input is when you control the input externally. What you want to do is use some kind of state to manage the value of the component (which handles the initial value) and the onChange handler will set the state that is placed in the value.
Here's an example with useState:
const [stateValue, setStateValue] = useState(initialVal)
<input
type="text"
value={stateValue}
onChange={(e)=>setState(e.target.value)}
/>
I want to be able to get the value of lightning-input when the user input is invalid.
From the lightning-input documentation:
For input type number, the component sets the value to '' (an empty string) when the number input becomes invalid. The change event is fired each time the value changes, even when the value is set to an empty string. This enables you to reset the field in your onchange handler when input is invalid. Use separate variables to set the value of the number input and retrieve it.
Is there a way to get the value even if it is deemed invalid?
For example:
test.html
<template>
<lightning-input formatter="currency" onchange={handleChange}></lightning-input>
</template>
test.js:
export default class test extends lightningElement {
handleChange(event) {
console.log(event.target.value) // prints the empty string on invalid input
}
}
If I paste "potato" into the input box, event.target.value will be the empty string. Is there a way to get the actual value? I have tried other event handlers (onblur, oncommit, and on invalid) as well as using the querySelector to no avail.
Thanks in advance!
Goal:
It's about the Material Autocomplete from material-ui for React in variant freeSolo. I understand that one is asked to handle value and inputValue independently, but because Formik and Yup are used to save the state and apply validation I would prefer to have only one value outside. For splitting this increases complexity in the outer code noticeably.
Attempt:
https://codesandbox.io/s/autocomplete-with-a-single-state-v442c?file=/demo.tsx
Is an example where I set the prop inputValue to value.title || '' and in onInputChange I check if the inputValue matches an existing option and otherwise create a new object, both to mimic onChange.
Issue:
Unfortunately, the list does not become filtered anymore. I had added some logging in my attempt was everything worked as expected and I can't infer what issue the component runs into. I hope anyone has some idea or ideally working code? So again, my overall goal is to have only one value representing the state and that, therefore, needs to be an object.
So I realised this can not be done because the states value and inputValue update at different times. value is only affected by inputValue once the user clears the input completely, setting inputValue to '' and value becoming null. So the asynchronous nature does not allow storing it in a single value in a clean way.
https://codesandbox.io/s/friendly-bohr-mjyhc
This is the code snippet of my form, I have created a field and I want to change its value onChange. I don't see the value changing on the screen and when I console log the event.target.value I only see the current letter being replaced from the previous letter (if I type AB, the console log values show A and then it replaces to B)
Formik library itself provides various method to handle the complexity.
In your code rather than adding a custom handle Change you can directly use handleChange method.
Simply replace -
onChange={customChange}
with
onChange={handleChange}
to make this work.
FYI - I also printed values so that you can see the formik bag of values.
Here is the working code -
Code Sandbox
EDIT 1 -
If you want to update the value from a custom handler then you can use setFieldValue for setting the field value.
Working Code - CodeSandBox 1