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!
Related
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'm using the React Switch component straight from this website: http://react-materialize.github.io/react-materialize/?path=/story/components-switch--switch. I put this into my SideNav like so:
<Switch
id="Switch-11"
offLabel="Off"
onChange={(e) => exampleFunction(e)}
onLabel="On"
/>
I did it so that when the switch is clicked, it would call "exampleFunction()" which contains this:
const exampleFunction = (e) => {
console.log(e.target.value)
}
The problem is that when I look at the console for the value of the switch, it is always "on," even if I press it multiple times. I'm a little lost as to why this happens. Any advice would be appreciated. Thanks.
If you want to know whether the checkbox is checked, you need to use e.target.checked, looking at the source code from materialize, we can see the onChange is passed directly to the input element, so you need to use the checked attribute of the input element.
The value attribute has the following definition:
The value property sets or returns the value of the value attribute of a checkbox.
For checkboxes, the contents of the value property do not appear in the user interface. The value property only has meaning when submitting a form. If a checkbox is in checked state when the form is submitted, the name of the checkbox is sent along with the value of the value property (if the checkbox is not checked, no information is sent).
From: https://www.w3schools.com/jsref/prop_checkbox_value.asp
I have a input field with a 'paste' eventListener attached. The eventListener function should handle a state variable.
However, the handling function always uses the initialized value of my state variable instead of the updated one.
I have made this snippet to demonstrate the problem.
Usage:
Paste some text into the input field. In the console, you should see Variable not set yet
Click on the button Set variable
Paste some text again into the input field. Console should now print Variable set!! but is still prints Variable not set yet
How should I solve this problem?
You can simply use onPaste event.
<input onPaste={handlePaste} placeholder="paste here" />
const handlePaste = () => {
console.log("pasted text", customVariable);
};
So I use my state to control a text input, but when I input a character, I don't want the character to show up right away. This is what is happening:
1. I focus on text input
2. I type in a character.
3. The character quickly shows up in the text input.
4. The character quickly disappears and the value reverts back to the state because the state has not changed yet.
I am wondering how I can prevent the character from showing up in the first place if the state has not changed.
Here is a simple example:
state = {
myValue: 'hello'
}
changedText = value => {
//Nothing here yet
}
...
render(){
return(
<Input
value={this.state.myValue}
keyboardType="numeric"
onChangeText={this.highIntervalDurationChange}
/>
);
}
As you can see it's nothing complicated, I'm just trying to figure out a way to not have the pressed character not appear right away when it is pressed because currently it appears and reverts back to the state. (Obviously I will modify the state after I can figure out how to prevent default from happening.) I also tried setting editable to false and that just makes it so I can't edit it at all. Thanks!
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.