Facing a weird issue. I have an input field in my react app.
I am setting the value of my input field using the defaultValue prop.
But my input field is not populating. Its showing as empty ( "" ). But i can see the value in its value attribute in the dom.
Here are the react props of that input
Any idea what i am missing here?
You could use defaultValue only on uncontrolled components, but your input have onChange prop, and that makes it controlled. You should set your default value through the value prop.
https://reactjs.org/docs/uncontrolled-components.html - here some info about it.
Related
I'm trying to get the browser to autocomplete searches based on values from a list.
here is the relavant part from the dbc.Input docs:
list (string; optional): Identifies a list of pre-defined options to suggest to the user. The value must be the id of a <datalist> element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.
here is my code:
but still, when I start typing there are just no suggestions:
what's wrong?
You are providing string instead of variable, this doesn't seem right?
I am using number format internationalization for input field.
e.g.my input field will take input values as 12,555.8 but when I submit form, I want to use value 12555.8 without comma.
I am using library react-number-format which is taking care of both the formats.
My question is how can I attach the 12555.8 number without comma to input field so that when I submit form, I can use that value?
<NumberFormat
thousandSeparator={this.props.thousandSeparator}
decimalSeparator={this.props.decimalSeparator}
value={this.state.formattedValue}
valOriginal={this.modifiedInputValue}
onKeyUp={(event) => {this.onKeyUpFormatted(event)}}
onValueChange={(values) => {
const {formattedValue, floatValue} = values;
this.modifiedInputValue = isNaN(floatValue)?'':floatValue;
this.setState({formattedValue});
}}
/>
I tried this code and while form submit tried to capture non formatted value like following
event.target.elements.valOriginal
I added property as data-valOriginal for React element. After this, we can access this value as element.dataset.valOriginal during submit form event.
I am using library react-number-format which is taking care of both the formats. My question is how can I attach the 12555.8 number without comma to input field so that when I submit form, I can use that value?
You do NOT want to attach the value of 12555.8 without the comma to the input field. Whenever you modify the "value" of an input field, you will be changing what is displayed for the user.
Instead, the solution is to do all data-modification outside of the form, right before it is submitted.
So on your form, you'll want to have an "onSubmit" handler, and in your react component, you'll define:
onSubmitHandler = (formData) => {
let cleanFormData = {...formData}
cleanFormData.myNumberInput = cleaningFunction(cleanFormData.myNumberInput)
//submit cleanFormData to server
}
Have a look at the following screenshot. You can see that the text input field is empty, yet its value attribute is set to "b".
You'll also notice in the Properties tab, under input, that value here is set to "". Why are they different? What does this mean?
Could this be related to the fact that the input was rendered by React?
If it helps, here is the jsx responsible for this element (redacted):
return (
<td
key={field._id}
className={`oldField ${colPos}`}
>
<input
type="text"
defaultValue={value}
onChange={this.changeOldField(record, field)}
/>
</td>
)
It seems that you are changing the defaultValue based on something from the state. The defaultValue prop should be set only once and not changed later on, because any more changes will be ignored by React. If you want to change the value based on state you should use the normal value prop. Otherwise, if you want a predefined value to appear to the user and at the same time control the input when it gets changed, you can either use some logic in your code that handles both onChange and the code in your component that wants to automatically change the value, or possibly place it in the placeholder prop, which will give you something like what you want.
I have below input control in my html
<input id="inputcntrl" type="text" value="{{(mynumber) | number:'2.2-2'}}" [(ngModel)]="mynumber" (blur)="validatemynumber()" />
As you can see I am formatting input text to make sure it has two decimal values. It does work correctly when user enters the value in input box. onBlur event I am checking the value entered by user and if it is not within the range (min >mynumber>max) then I am setting mynumber with min value. Problem is mynumber displays min value with no formatting. forex: If min valule is 10 then input box should display 10.00 but it displays only 10..any idea how can I fix this? I am using angular2
Update: I think problem in my case is with somehow related to binding..When I update mynumber from my component and the new value is reflected in UI but its formatting is lost. mynumber variable is of type number. I need to find a way to update value with formatting from component
Try mynumber.toFixed(2)
<input id="inputcntrl" type="text" value="{{mynumber.toFixed(2)}}" [(ngModel)]="mynumber" (blur)="validatemynumber()" />
Here is a reference documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
If you want to format mynumber at your component with an angular way, try using built-in DecimalPipe at your component(the same as number pipe used at your template).
import { DecimalPipe } from '#angular/common'
this.mynumber = this.decimal.transform(this.mynumber, '2.2-2');
Plunker demo
I am using react-rails gem to work with ReactJS for Rails.
The weird thing is if I set a non-empty value property when rendering React component, the input field won't receive any keyboard event
This doesn't work!
React.DOM.input
type: 'text'
className: 'form-control'
value: "ABC"
But it works
React.DOM.input
type: 'text'
className: 'form-control'
value: ""
Any idea guys? Thanks a lot!
I have answered to one question similar to this, i don't know how to share that answer to you. So i am re-typing that.
In react, the component render's only when the state changes. Whenever the state of the component changes, then the corresponding component render. That means we are updating virtual DOM with new value and attach it to the main DOM. That's how react works.
In the case of input text fields the value of the text fields changes only when the user enter some value. In this case we are not updating any state, we are adding new value to "value" property of the text field. So the react wont render anything and new value is not added to the DOM. Here we are violating react behavior. So the react wont allow us to edit the input text fields.
In order to the get the smooth flow of the react, it allow us to use on change call back function in-order to set the state. On changing the value of the text filed, state set's with the new value so the react render and the DOM updated with the new value.
Instead of using call back function, we can use valuelink property to add value to input text. like:
getInitialState: function(){
return {
value:'' //for empty text value
}
}
For value link, we have to give state value instead of variable value. For complete understanding please refer:
https://facebook.github.io/react/docs/two-way-binding-helpers.html
whenever we enter the text in text box, the state get updated and the value of the input text set to state value.