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.
Related
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
}
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.
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 my form I have some input controls which are bounded with controller's scope data. Based on users selection I am bounding selected item by using ng-model to input controls.
I am validating those inputs by using ng-maxlength ,minlength ,ng-pattern and other inbuilt validation directives.
Class for highlighting the invalid values.
.ng-invalid { border-color:red; }
But when user wants to add a new product, then I am creating an empty object and adding it to controller's scope data.
At the very first time while creating new item I don't want to highlight every thing with red, because very thing is empty.
Is there any way by which I can highlight invalid input on their focus and after it will show as invalid until use put some valid values in it.
When use select any existing data then I am validating control at that movement.
You can use forms' $pristine as a condition for your classes.
As noted by this question and in this fiddle, when injecting an input the value attribute doesn't seem to be added to the DOM, MooTools seems to handle it internally. Unfortunately this means that an input injected thus:
new Element("input", {type: "text", value: "injected value"}).inject(parent);
can't be selected like so:
parent.getElements('input[value="injected value"]').length;
(this returns 0 instead of 1 as it would if the value attribute was present)
In my project I need to insert blank input boxes but only if there isn't already a blank one;if(parent.getElements('input[value=""]').length == 0)however this is always resolving to true no matter how many blank inputs there are.
Is there a better way to achieve my goal or is there a fix for what seems like a bug?
You could try adding:
var x = new Element("input", {type: "text", value: "injected value"}).inject(parent);
x.setAttribute("value",x.value);
Caveat: While this fixes your issue with the element's value attribute not being reflected, the value attribute is typically not a good way to check if a field is empty, because it is not sync'd with the input's contents.
It would be better to use something like this:
$$('input[type=text]').filter(function(item){return (item.value=="");})