Acessar atributo da classe do componente react numa função que gerencia evento de botão | React

Caros,

Criei um componente react e, na função que gerencia o evento do botão (criarContato) , não estou sabendo acessar corretamente os atributos da classe(nome e telefone). Como faço?

Do jeito que o código está ocorre o seguinte erro: Parsing error: Unexpected keyword 'this'. (24:30)

`import React, { Component } from "react";

class CadastroContato extends Component {

constructor(props) {
    super(props);
    this.nome = "";
    this.telefone = "";
}

_handleMudancaNome(evento) {
    evento.stopPropagation();
    this.nome = evento.target.value;
}

_handleMudancaTelefone(evento) {
    evento.stopPropagation();
    this.telefone = evento.target.value;
}

_criarContato(evento) {
    evento.preventDefault();
    evento.stopPropagation();
    const novoContato = { this.nome, this.telefone };
    const novoArrayDeNotas = [... props.contatos, novoContato];
    const novoEstado = {
        contatos: novoArrayDeNotas
    };
    props.setState(novoEstado);
}

render() {
    return (
        <form onSubmit={this._criarContato.bind(this)}>
            <h3>Insira novo contato:</h3>
            <input type="text" placeholder="Nome do contato"
                onChange={this._handleMudancaNome.bind(this)} />
            <br />
            <input type="text" placeholder="Telefone do contato"
                onChange={this._handleMudancaTelefone.bind(this)} />
            <br />
            <button>Cadastrar contato</button>
        </form>
    );
}

}

export default CadastroContato;`

Oi Ubirailson, tudo bem?

Desculpe a demora em retornar.

O erro que você está enfrentando ocorre porque o this não pode ser usado para se referir a atributos da classe dentro de uma declaração de objeto. Para acessar os atributos da classe nome e telefone no método _criarContato, você pode simplesmente usar this.nome e this.telefone, respectivamente.

Além disso, observe que você está tentando acessar a propriedade props.contatos, mas não está passando essa propriedade para o componente CadastroContato. Você pode fazer isso passando-a como uma propriedade ao renderizar o componente, por exemplo:

<CadastroContato contatos={this.state.contatos} setState={this.setState.bind(this)} />

Dessa forma, você poderá acessar a propriedade contatos na função _criarContato.

Por fim, em vez de usar bind para vincular this aos métodos _handleMudancaNome e _handleMudancaTelefone, você pode usar funções de seta, que têm o escopo de this lexical e, portanto, não precisam ser vinculadas. Por exemplo:

_handleMudancaNome = (evento) => {
    evento.stopPropagation();
    this.nome = evento.target.value;
}

Com essas alterações, o seu código atualizado deve ser semelhante a este:

import React, { Component } from "react";

class CadastroContato extends Component {
    constructor(props) {
        super(props);
        this.nome = "";
        this.telefone = "";
    }

    _handleMudancaNome = (evento) => {
        evento.stopPropagation();
        this.nome = evento.target.value;
    }

    _handleMudancaTelefone = (evento) => {
        evento.stopPropagation();
        this.telefone = evento.target.value;
    }

    _criarContato = (evento) => {
        evento.preventDefault();
        evento.stopPropagation();
        const novoContato = { nome: this.nome, telefone: this.telefone };
        const novoArrayDeContatos = [...this.props.contatos, novoContato];
        const novoEstado = {
            contatos: novoArrayDeContatos
        };
        this.props.setState(novoEstado);
    }

    render() {
        return (
            <form onSubmit={this._criarContato}>
                <h3>Insira novo contato:</h3>
                <input type="text" placeholder="Nome do contato"
                    onChange={this._handleMudancaNome} />
                <br />
                <input type="text" placeholder="Telefone do contato"
                    onChange={this._handleMudancaTelefone} />
                <br />
                <button>Cadastrar contato</button>
            </form>
        );
    }
}

export default CadastroContato;

Espero que tenha te ajudado.

Um abraço e bons estudos.