Can i change input value populated from component state from console by using something like document.getElementById('someId').value="some_value" in react
Yes you can.
Whatever the Library/Framework you are using to build your DOM, it will eventually produce DOM, thus, it will be available and accessed as: window, document and everything inside of them.
So, doing the following will update value of the field that matches with the parameter given to the getElementById.
document.getElementById('someId').value="some_value"
I suggest you use React Developer Tools to trace and edit value of state
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Hope this help!
Related
I am implementing a form in react using react hook form, The form has two select fields country and states.
Second field changes the option based on the selection in first field.
Please see the below sandbox for more details
Creating/submitting the record works perfectly fine.
The problem is: In edit, when I pre populate the values in the form using setValue(), it does not set the second dropdown(state select in the sandbox below) values on the UI but it shows that it has set the value to the field(see in the console for field state).
[CodeSandBox] https://codesandbox.io/s/angry-murdock-h0lbsp?file=/src/App.js
Steps to reproduce:
Open this sandbox in the browser.
Click on the SET ALL VALUES button.
See the blank value in states select
Also, Whats the best way to populate a form like this, i.e. in defaultsValues or useEffect?
What am I missing here, so putting it for the experts here.
Thanks for your time.
The problem you are having is about setValue. This function does not trigger a re-render in most cases. You can use reset instead.
https://react-hook-form.com/api/useform/reset
Also, if you'd like to fill the form without any user interaction, use reset in useEffect with proper dependencies.
Lastly, If you'd like to have just them having initial values instead of being undefined, set defaultValues. It is also recommended in official documents:
Important: You should provide a proper default value and avoid undefined.
undefined is reserved for fallback from inline
defaultValue/defaultChecked to hook level defaultValues. undefined value is conflicting with controlled component as default state
https://react-hook-form.com/api/useform
I have an ArticleFields component that loads an article object (through location.state) which has either empty parameters(when i try to make a new article) or preexisting values when i want to edit an article.My inputs though, won't change when i pass a preexisting value,even if it's an empty string.On the other hand ,the onChange function still works for textarea.Any ideas to why is this happening,i know i can just change the inputs to textareas,but ofcourse i want to understand why this is happening first
Here is a sandbox for reference
https://codesandbox.io/s/green-sound-sopdvp?file=/src/App.js
Use defaultValue instead of value:
value={article.title}
ReactJS newbie question. I'm trying to set focus to the "Emergency Service" input field after setting current location on the "Location Lookup" field but both fields live in separate components. I'm already making use of useRef in each component but trying to reference either ref from another component returns an error. Any assistance would be greatly appreciated. Please see my project at link below. I added a comment on line 208 of LocationLookup.js where I'm trying to trigger focus to the Emergency Service field. https://codesandbox.io/s/twilight-waterfall-3okx4?file=/src/index.js
Quick solution would be:
Change EmergencyService - wrap it with React.forwardRef, pass ref to Input (also see how to combine refs (for example https://github.com/gregberge/react-merge-refs)
Create ref (emergencyServiceRef) by useRef() in SearchBar and pass it to EmergencyService.
Pass prop to LocationLookup (maybe onLocationChange)
on line 208, call onLocationChange()
In SearchBar, you would handle callback onLocationChange and do "emergencyServiceRef.current.focus()
I have a Ant Design 4.x.x Form element without multiple Form.Item. I need to implement some logic involving form items' values, for example disabling a field if another one's value equals something, or recalculate select options when a text input changes.
To do so, I create the form using Form.useForm() and use form.getFieldValue() in my functional component body and / or in the returned JSX, like so :
It is working as I expect to, but at startup, getFieldValue usages throw annoying
index.js:1 Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?
I found that Form functions cannot be used before rendering, and the problem also occured when displaying a form in a Modal like stated in the docs.
So I feel that I'm missing something on how to correctly add custom logic between fields, or doing some calculation involving fields values in component body.
What would be a correct approach to do this ?
Try adding getContainer={false}, to your modal this will work for you.
I have a input field:
<input value="0">
which i can easily clear() and type("123") in cypress.
the value gets updated and everything is fine.
on the other side, a prefilled input field like below I cant update because cypress writes my value of .type("123") just at the beginning of the value.
<input value="1500000">
my method is the following:
.find("input")
.clear()
.type(`${input}{enter}`)
changes on the fields fire redux actions, we use redux for our whole state handling. could that be a problem?
otherwise, do you know of this issue?
Try adding an assertion to make Cypress 'wait' for the input to clear:
.clear().should('have.value', '')
.type(...)
I tested using the HTML found here and everything works fine (in the screenshot I wrote "Stefano" instead of the default value)
You hit the point when you cite React: this kind of state changes requires a bit more work to run as expected because React (and Vue etc.) obviously overwrites everything in the DOM.
You're facing a common issue where React re-renders the component as soon as an event is triggered... so you have to change the input value/defaultValue management in your React component, Google for it and you find a plethora of solutions about that 😊