Elemento Textarea Não Controlado

Introdução

Neste laboratório, aprenderemos como criar um elemento <textarea> não controlado (uncontrolled) em React. O objetivo deste laboratório é demonstrar como usar as propriedades defaultValue e onChange para passar o valor da área de texto para uma função de callback no componente pai. Ao final deste laboratório, você terá uma melhor compreensão de como criar campos de entrada não controlados em React.

Elemento Textarea Não Controlado

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

Esta função renderiza um elemento <textarea> que não é controlado pelo componente pai. Ela usa uma função de callback para passar o valor da entrada para o componente pai.

Para usar esta função:

• Passe a propriedade defaultValue do componente pai como o valor inicial do campo de entrada.
• Use o evento onChange para acionar o callback onValueChange e enviar o novo valor para o pai.

const TextArea = ({
  cols = 20,
  rows = 2,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <textarea
      cols={cols}
      rows={rows}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

Exemplo de uso:

ReactDOM.createRoot(document.getElementById("root")).render(
  <TextArea
    placeholder="Insert some text here..."
    onValueChange={(val) => console.log(val)}
  />
);

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Elemento Textarea Não Controlado. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.