Why 'handlePost' is not defined? - reactjs

Try to add a handler to my Node, React button component, to insert a row in DB, but I got an error, though I am just copying code from an example tutorial. What is wrong?

The method handlePost is not defined in class Button. But you are specifying it as this.handlePost. Move the method inside class Button.

Related

Call multiple funtions with single onClick in ReactJs

This is my profile settings page: Code
My buttons already call onClick function, but i wanna add saveInfo to my "save" button.
I just noticed that after clicking "save" the only field that remains saved is First Name, can you explain to me why?
I adjusted your code for this to work properly.
Here is an updated sandbox https://codesandbox.io/s/charming-kapitsa-kznoi?file=/src/UserInfo.js
I extracted all of your additional code so it would be easier for me to debug, which is why you won't see some of the code in your original example.
Quite simply, the issue was that you were rendering an empty <input> when saved was not true.
If you want to send your saveInfo simply set the value of each input (when saved isn't true) to the value of your saveInfo.
I left comments within to help understand.

How to trigger click of an element (in the destination route component) after $state.go?

So im calling $state.go from a class after an element change event. I am able to change the state and go to the desired route. The component changes successfully as well.
The problem is: I need to click an element (programmatically) in the destination component but I'm unable to do so.
I tried using the then-function of state go. Referenced the element that I wanted to trigger. It just returns ye.fn.init {} whenever i try to log it. Maybe it just isn't loaded yet?
You can pass a parameter in $state.go function like this:
$state.go('stateName', { param: "test" } );
Then in the component you can access that value and procceed with any action.
The way to get state params depends on the version of ui-router. (if you want specify the version)

Antd Modal not working

I'm making a react app using antd, I'm trying to add modal but it doesn't work, every time I click the trigger button I got errors saying "Uncaught Error: Element ref was specified as a string (header) but no owner was set. You may have multiple copies of React loaded.". Im following this syntax from https://ant.design/components/modal/
I found related problem https://github.com/jrm2k6/react-markdown-editor/issues/55
and according to react
https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
they dont recommend using ref attribute, instead use a callback pattern.
I dont know what to do..
Any help, thanks.

React, dynamically adding textarea results in errors onChange

My code is here - https://codesandbox.io/s/92xmm6zvmo
The idea is that the user clicks on an Edit link in a table, the row expands and a textarea opens in the expanded row so that the user can edit their JSON in it. This is all working great, except for the onChange event handler of the textarea. When the event fires it seems to be missing a reference to this, and is unable to bind an appropriate event handler. I don't understand why this is the case, I would expect there to be a reference to the ExpandableTable component available as the expandedRowRender() method belongs to that class.
The other form fields (that are not dynamically added) appear to be working fine.
Showing your code make things easier.
I think it's working now.
https://codesandbox.io/s/wkym185vpl
The problem is, you were not binding correctly the "this" context. if you are going to use arrow function, make sure all class functions are:
Class MyClass{
expandedRowRender = () => {}
}
if you are doing expandedRowRender(){} make sure bind it in the constructor.
Class MyClass{
constructor(){
this.expandedRowRender = this.expandedRowRender.bind(this);
}
...
expandedRowRender(){}
}

wildcard link to parent route reactjs

Let's say I have a class handler that would respond on both /handle and /handle/:id.
I have a problem :
The component(in this case , the handler class ) that is shown on both pages has buttons that take me from one to an other, for example a button that gets me from /handle to /handle/195 and another that gets me from /handle/195 to /handle.
So a button on /handle having:
onClick={()=>{hashistory.push('/handle/195')}}
which works perfectly, but the one on /handle/195 with:
onClick={()=>{hashistory.push('/handle')}}
does not, does anyone know how to redirect to parent URL using hashistory?
I apologize if my problem was poorly explained. I tried to do my best.
Thanks.

Resources