CODEWITHSUNDEEP
reactjsantd
llevar
llevar

Reputation: 785

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.

Upvotes: 1

Views: 110

Answers (1)

Yichz
Yichz

Reputation: 9681

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(){}
    }

Upvotes: 1

Related Questions