javascript – React – Why use a global variable to store it causes the reaction to see only the last reference?

I learn to react and I came across a situation that I needed help to understand, and being specific, I could not find any reference to it.

I have the record Input.js

import React, {Component} from "react"
import the input, {InputBootstrap} of "react-bootstrap"

export default class Entry extends the {
render () {
return
            
) } }

To create a generic entry for my SPA.

And the folder Cadastro.js

export default class Registration extension Component {
constructor () {
Great ();
self = this;

...
}

render () {
return
            
...

But I used a pattern to not have to insert .bind (this) end of each method I create, using the self = this;

Following this model would make the file Input.js

import React, {Component} from "react"

var itself;

export default class Entry extends the {
constructor () {
Great ();
self = this;
}

render () {
return
        
) } }

Using this way, the result that I have on the screen is not the one expected, as soon as I have entered the first character of an entry of the screen which is in conformity with the image.

Printing screen

I do not understand why all fields have been replaced by the last one in the list I created in the file. Cadastro.js

Can you help me, please?