Adicionar manipuladores de eventos e atualizar estado

  • 5 minutos

O estado do armazenamento no componente principal do nosso aplicativo (App) nos permite ler os valores atuais de todas as propriedades importantes. Não precisamos interagir com cada componente. Também podemos centralizar eventos, garantindo que os dados sejam modificados em apenas uma localização.

Cenário

Queremos permitir que os usuários do aplicativo toquem em um item na lista de ingredientes quando o concluírem. Marcaremos o item como prepared no estado. Essa configuração será refletida no aplicativo. Quando os valores são alterados, o componente detecta as atualizações e reavalia conforme necessário.

Adicionar o método para eventos de clique

  1. Abra o arquivo App.jsx.

  2. Crie um ouvinte de evento chamado ingredientClick. Adicione-o sob o comentário que lê, TODO: Create ingredientClick event listener.

    function ingredientClick(index) {
    const updatedRecipe = { ... recipe };
    updatedRecipe.ingredients[index].prepared = !updatedRecipe.ingredients[index].prepared;
    setRecipe(updatedRecipe);
}

    A lógica começa criando uma cópia de recipe usando o operador de espalhamento. Em seguida, recuperamos o ingredient atualizado usando o index. Invertemos o valor de prepared. Por fim, substituímos o objeto recipe no estado usando setRecipe.

  3. Adicione IngredientList, um componente que exibe os ingredientes de uma receita. Para fazer isso, adicione o código a seguir após o comentário TODO: Pass ingredients and event listener to IngredientList.

    <IngredientList ingredients={recipe.ingredients} onClick={ ingredientClick } />

    Observe que podemos passar a função ingredientClick, pois passaremos qualquer outra prop para um componente.

Atualizar IngredientList para usar o ouvinte de eventos

No React, as propriedades (ou props) podem ser qualquer tipo de JavaScript, incluindo funções. Portanto, podemos configurar um manipulador de eventos como uma prop. Essa configuração nos permite centralizar a manipulação de eventos.

Vamos atualizar IngredientList para usar a função ingredientClick que criamos anteriormente:

  1. Abra o arquivo IngredientList.jsx. Observe o componente existente. Usaremos esse componente para mostrar como usar eventos.

  2. Abaixo do comentário TODO: Add onClick event, adicione o JSX a seguir.

    onClick={ () => props.onClick(index) }

    Observe que podemos passar um parâmetro para a função onClick de prop.

    Observação

    Não há motivo específico para termos usado o nome onClick nas props do componente. Ele é apenas o nome escolhido. Ele foi passado anteriormente do arquivo App.jsx.

Testar a página

  1. Salve todos os arquivos.
  2. Volte para o navegador e atualize a página. Se você selecionar os ingredientes, o status de linha deverá ser alterado. Ele é alterado porque a propriedade prepared está sendo atualizada.