5

Na documentação do React ele traz um exemplo de form, quando o input recebe algum valor a propriedade onChange é chamada com a função handleSubmit(event) dessa maneira onChange={this.handleChange} porque eu não preciso definir o parâmetro nesse caso, já que a assinatura da função tem um parâmetro?

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }

2 Respostas 2

7

Porque você não está chamando a função, está apenas dizendo qual função será usada pelo framework neste momento. Isto é o que se chama função anônima ou técnica de callback, você está parametrizando o que será executado em determinando momento, no caso específico o que será chamado quando ocorrer o evento onChange, então quem chamará a função de verdade é o React e ele é que passará um argumento para sua função. Portanto você está passando uma referência para a função e não chamando-a, os parênteses é justamente o que diferencia isto, com, chama, sem, passa referência.

2
  • como ele sabe exatamente que o parâmetro está certo? tipo como ele sabe que tem que usar o event ou qualquer coisa? Commented 19/05/2019 às 18:50
  • 1
    Ele não sabe exatamente, isto não é característica do JS ou do React. Você tem que fazer certo o que ele espera, ele faz o que tem que fazer e espera que sua parte esteja ok, se não estiver vai dar erro. È um contrato que ele faz com você e espera que você cumpra. Mesmo em linguagens e tecnologias que garantem mais isso, a garantia vai até certo ponto, é como você fazer um for em todo um array, se você fizer errado vai dar erro de compilação, ou execução ou de lógica.
    – Maniero
    Commented 19/05/2019 às 19:49
5

Em linguagem JSX escreve-se onChange={this.handleChange} mas na verdade é o mesmo que .addEventListener('change', this.handleChange) ou seja uma callback. No momento em que essa callback é usada ela vai receber todos os argumentos que lhe forem passados.

Exemplo:

function handleChange(e){
    console.log(e.type, this.checked);
}

const checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', handleChange);
Clica aqui: <input type="checkbox" />

Nota que em classes React por vezes tens de usar o .bind(this) para garantir que essa callback vai ter o contexto de execução que esperas, ou seja o this é a instância da classe:

onChange={this.handleChange.bind(this)}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .