I have a form that is dynamic and display inputs (select, multiple or text) when an answer is provided on previous question.
When a text input is created, it is because of the answer of the previous question, which means that many way can be created by answering differently.
The problem :
When I answer a select question, for example, a text input can be displayed next. If I answer this input, another input can be displayed. But, if I update my answer for the first select input, this means that a new way is created, but the next one is still a text input, so ReactJS don't create a new one, just update the existing one. The fact is that the value is still in the input, and that's not what I want, I need the value to be updated, either by a defined value, or by an empty one, but this need to be updated.
I have created a stackblitz example with a little reproduction.
In this reproduction, you can choose a value in the select input, but then if you choose the other one, the value will not be updated on the input. The only way to update it, is to clear it and recreate it by choosing a new value.
I know that in this example, using the value from the state and updating the state directly in the change method will work, but in my project I don't have a defined number of text inputs.
The only thing I see to do it with state, is to create an array and dynamically adding or removing values when inputs are added or removed from the form. But I would prefer a "refresh" input method.
You can add your selected values inside Array state then loop map the
//states
this.state = {
values: []
};
//joinin new values with previous array
handleSelect(event) {
var joined = this.state.values.concat(event.target.value);
this.setState({ values: joined });
}
//then mapping on render
<div>
{
this.state.values.map(x=>(
<Input value={x} placeholder="type here" />
))
}
</div>
Here is working example in your code:https://stackblitz.com/edit/react-n1jbk6
Related
I have several html checkbox that is either on/off based on the properties of an object inside of an array say: objectArray.get(i).isCheckBoxActive. Since the user can change the object properties I'm trying to implement a button that reset all changes. My idea was creating a copy of objectArray (say objectArrayOriginal) and when the button is clicked it calls a function that copies back objectArrayOriginal into objectArray. I would expect that if a checkBox is off in objectArrayOriginal then, after pressing the button, it should be off also in the html page. To copy the object I did:
var objectArrayOriginal = JSON.stringify(objectArray)
.....
function clickReset(){
vm.objectArray = JSON.stringify(objectArrayOriginal)
}
I checked and although the field objectArray.get(i).isCheckBoxActive gets reset to its original value; the checkboxes remain checked/unchecked. The solution I found to be working is iterating over objectArray and comparing the values one by one with objectArrayOriginal. I would like to understand why the previous method fails and if there's a better one. Thanks in advance for any help!
There is an UI I have created using React. There are two text fields to enter value, after entering and saving those values will be populated in a table below the two fields(we are using antd for designing).
However when I click a single record in the table and click edit in that particular record data from that record will be populated to the above mentioned text fields. When this happens I want my app to scroll up and show those two text fields which are ready to be edited.
But currently it stays at the same position after clicked edit, without scrolling up and showing two text fields. Here's an image descripting my experience
Check this answer to find how to control srollTop: https://stackoverflow.com/a/55184755/2360631
But I don't think it's a good idea, maybe you can consider to freeze the edit area otherwise when you finish edit you may need to scroll back again...
Basically you want to set focus to some component after a re-render.
To refer to a particular component, use react refs
make a react ref of whatever you want to set focus to and assign it as a ref prop
constructor() {
super();
this.foo = React.createRef();
}
componentDidUpdate() {
this.foo.current.focus();
}
<Bar ref={this.foo}> .... </Bar>
foo is the name of ref
Bar is the component you want to set focus to
in your case it can be a parent of both input fields or any one of the input fields
I have a table of items with an edit button next to it. When the edit button is clicked, the fields in that row turn into input fields where they can be edited, and a cancel button shows up. If they click cancel, the fields turn back into regular display fields. It's kind of like inline editing. I have two sets of <td> elements: one for display and one for editing.
What I'm looking for is a good way for me to keep the item's original values, so that when they click cancel, the data goes back to what it was originally. But if they click save, I'd like that data to stay on the object and that's what should be displayed.
I originally tried this (logic and processing is in the controller): On the edit button click, I'd create a "snapshot" of the object as an attribute on itself. Something like...
vm.edit = function(item) {
item.modified = angular.copy(item);
}
So what I'm actually doing is, when the row is not being edited, I'm displaying item.someProperty. When the edit button is clicked, it performs that copy in the controller, and the fields I show are actually item.modified.someProperty. Those are the different bindings in those two sets of <td> elements I mentioned, aside from the fact that the second set are input fields.
It works well as far as reverting goes (when they click cancel), but I'm stuck at the part where I want to update the object's original values if they click save. Basically, I need a way to get item.modified properties onto item itself. I've tried doing something like:
vm.save = function(item) {
item = angular.copy(item.modified);
}
And it doesn't seem to be working. I don't think I expected it to work in the first place, because it's kind of like overwriting itself with itself. Not sure if that would work.
What is a good way to accomplish this? Or maybe there's a better way to do what I'm trying to do?
Use a combination of copy() and extend(). Only edit the copy and store a reference to original that you can extend when you save
var storedItem;
// copy to variable before editing and store reference to original
vm.edit = function(item) {
storedItem = item;
vm.editItem = angular.copy(item);
}
vm.save = function() {
angular.extend(storedItem, editItem);
vm.editItem = null;
storedItem = null;
}
Set various ng-model to vm.editItem properties. If user cancels edit the original object has been unchanged so there is nothing to revert
I'm not understanding this cloning process... this is what's happening, there are four pictures, three clicks, first photo is the initial state.
In the third picture there are two boxes, that's fine, but rather than each box having one project name input and add task button, there are two in the first box, and normal in the second box. Click the button again and it becomes 3:2:1, next click it would be 4:3:2:1, etc... I don't want that. I just want boxes to be added with one piece per box.
code
function addProject() {
$(project).clone().appendTo(".projectPanel");
$(projectNameInput).clone().appendTo(".project");
$(addTaskButton).clone().appendTo(".project");
}
Your problem is your appendTo it appends the element to all elements in the set of matched elements so everything with the class "project". for more information on it try looking at the jquery appendTo documentation. to fix it try something like this
function addProject() {
var newProject=$(project).clone();
newProject.appendTo(".projectPanel");
$(projectNameInput).clone().appendTo(newProject);
$(addTaskButton).clone().appendTo(newProject);
}
using the return value of $(project).clone() allows you to grab only the new project rather than all of the projects that currently exist
I am beginner in JavaScript. For exercise, I try to restore a form (at page closed / page reloaded) using cookies. I take the following steps:
Create an array with form selections
Convert to string
Create cookie
Retrieve cookie
Extract string
Convert to array
... Until here everything goes perfect. But the next step doesn't work anymore...
Pass array values to restore the form elements
Regardless the form selections (present correctly in the retrieved array) after reloading page I get every time only last the radio button checked (even if I increase or reduce the number of buttons) and all checkboxes checked.
I tried anything I know to find the error but no success. I also converted the string "true"/"false" values to Boolean, but no change.
The real situation:
frm[0]=true
frm[1]=false // for two radio buttons
frm[2]=false
frm[3]=false // for two checkboxes
document.getElementById("myradio1").checked=frm[0]
document.getElementById("myradio2").checked=frm[1]
document.getElementById("mycheckbox1").checked=frm[2]
document.getElementById("mycheckbox2").checked=frm[3] // pass the array values to the form elements
But, as I said, any values I pass I always get selected the last radio buttons and all checkboxes.
Probably this code doesn't follow the "best practices" of JavaScript, but before I change it I want to understand why it behaves like this. I thank you in advance for your comments, because I want very much to clarify this issue.
It happens because for a radio button, only one radio button can be clicked in a group of radio buttons.
And for the checkboxes, you are using the same ID twice, so the change isn't actually reflecting on the other checkboxes.