I have a project that has a list of stuffs using ReactJS, please see JSBIN, and want to search these stuffs with keyword.
TEST: input mi in search box to search ID, the this.state.data is filtered right but input value don't update right(gary should not appear).
I've checked the problem is input component
<input type="text" defaultValue={this.props.data.userid} ref="userid" disabled name="userid" />
with defaultValue for the fist time render, but upcoming render don't change it's value again; But if changed it to value, it's cannot be edited
Question: how to make search right also make all input editable with minimum code modify?
Your JSBin gives me strange output (and in a language I do not understand).
However, it looks like your problem is inside handleChange(), which is inside your Forms component. If you want the content of the page to update, there should be a this.setState function somewhere inside handleChange. In current setup, handleChange() only does console.log, but does not re-render..
Related
I am trying to use the final-form calculator to clear a field whenever another field has changed.
In my example, I have two fields. Whenever the first field changes, the second field is cleared. This is expected.
However, A problem arises when the parent component of the form is re-rendered. Each time the parent component calls to it's render function, the second field is cleared even though the first field has not changed. This can be observed by clicking the forceUpdate button at the top.
Is it possible to prevent the second field from clearing like this? Preferably without using shouldComponentUpdate
I have been able to resolve it by moving the decorators array outside of the component.
const decorators = [calculator]; // declared outside of App
And reference the value in the form props
<Form
decorators={decorators}
...
I'm building a form using React and Material UI. I'm supposed to add a helper, when the user is starts typing in the Text input field. What is property which I could use ? The helper should not be displayed when moved to next text input field
If you want to have that on a Textfield there is a helperText prop that you can use to show some information useful information to the user. Take a look at the docs and give it a shot.
You can use the input value to know if the user has typed something and show this helperText conditionally, I'm not sure if I understood what you wanted but I'm guessing it goes this way.
I've added here a sample of a helperText showing only when the user is typing https://codesandbox.io/s/material-demo-supmg?fontsize=14
What I'm trying to do is apply the following Vue example from the docs to use a v-text-field component: https://v2.vuejs.org/v2/guide/migration.html#Two-Way-Filters-replaced
When using a simple input field, it's working fine, but when using a v-text-field, it leads to what is being shown in the field does not match the value itself (as can be seen with Vue Devtools).
I created a CodePen demonstrating my problem: https://codepen.io/anon/pen/EpvaWQ. I'm replacing the basic input field:
<input
ref="input"
v-bind:value="value"
v-on:input="updateValue($event.target.value)"
v-on:focus="selectAll"
v-on:blur="formatValue"
>
with Vuetify's v-text-field:
<v-text-field
ref="input"
v-bind:value="value"
v-on:input="updateValue($event.target.value)"
v-on:focus="selectAll"
v-on:blur="formatValue"
><v-text-field>
The first field is the example from the Vue docs, the second field is the same one but then with a v-text-field component instead of an input field.
Typing in the first field works as expected (like in the Vue docs), but typing in the second field doesn't format the number in the same way as the first field does.
To reproduce the problem: type in 12.3456 in the first field and then in the second field. The value is correctly cut off in the first field, but is not cut off in the second field.
Anyone has an idea about how to fix this?
The main problem is in this.$refs.input.value because v-text-field is component and this field is not related to internal <input> tag value.
The workaround is to use some internal field, watch main value prop and change internal field in nextTick to correct value - I forked codepen, see this https://codepen.io/anon/pen/KBvZEq
Also as another solution you can access "native" input value of v-text-field like this
this.$refs.input.$el.getElementsByTagName('input')[0].value
but I think it will bring some new issues and looks as "dirty" way.
You cannot use because you are mutating props.
this.$refs.input.value = currencyValidator.format(this.value)
instead you should use $emit input:
this.$emit('input', currencyValidator.format(this.value))
Don't forget to emit it as number.
I have no idea how to fix this thing
have been spent more than an hours to solve this problem
but none of the solution fix this
So i have a combo box (Select tag element) which i would like to change the value when a modal box is opened.
I have already implement defaultValue to set the value of the combobox but it won't change. However on other input such as the notes / amount it can get the defaultValue and set it to the element.
I have try to debug the this.currState.deposit_type_id and i get the right value
But in fact it won't change
it always refer to the default value
I have made several type of this thing but none of them has ever had this bug
Here's the screenshot for the code and the image
This is the code to pass the data from parent's component, and deposit type for all the value i will put on the combo box
This is the code that i used for set the default value when the modal box is opened
This is the result, it supposed to choose "Kas Besar", yet it choose "Deposit Type" instead
Not sure as I am not able to try it now but you could try to add your value argument for input's html like this:
value={ this.state.currData && this.state.currData.deposit_type_id }
But it would be better to get currData from props. So this.props.currData.
I'm new to ReactJS, so I apologize in advance if the questions a bit fragmented.
Basically, I am working on creating a page of a website where someone can change their username and password. I want to implement this in a bootstrap Form where one form control has username, a second has password, etc. One button (edit) will make the FormControl text fields editable (enabled) and the other (save) will make the text fields disabled.
Here's where I run into a problem. From what I've learned of react so far, this involves changing the state. However, the way the prop disabled works, is it isn't "disabled=true" or "disabled=false", it's simply "disabled". Therefore, I can't make it "disabled={this.state.x}" or anything along those lines. Here's the relevant line of code...
< FormControl controlId="testControl" type="text" placeholder="Username" />
Basically, on a button click (edit) I would like to make this disabled, but I'm unsure of how to do that, when any mention of disabled will result in the FormControl being disabled, regardless of it being set equal to true or false.
Thanks! And please let me know if I can provide more information - as I said, I'm very new to ReactJS.
You'd have to trigger a state change on edit event handler so that react knows to re render the form(which react does intelligently).
Without any state change you will have to manipulate the DOM and achieve whatever you want