Campo de entrada no controlado

Introducción

En este laboratorio, exploraremos cómo crear un campo de entrada no controlado utilizando React. Un campo de entrada no controlado es una forma simple y flexible de capturar la entrada del usuario sin gestionar el estado del valor en el componente padre. Utilizaremos una función de devolución de llamada para informar al padre sobre las actualizaciones de valor, lo que facilita la integración con otros componentes y APIs.

Skills Graph

Campo de entrada no controlado

index.html y script.js ya se han proporcionado en la máquina virtual. En general, solo es necesario agregar código a script.js y style.css.

Este código renderiza un elemento <input> no controlado que utiliza una función de devolución de llamada para informar a su padre sobre las actualizaciones de valor. Para utilizarlo:

• Pase el valor inicial desde el padre utilizando la propiedad defaultValue.
• Pase una función de devolución de llamada llamada onValueChange para manejar las actualizaciones de valor.
• Utilice el evento onChange para activar la devolución de llamada y enviar el nuevo valor al padre.

Aquí hay un ejemplo:

const UncontrolledInput = ({ defaultValue, onValueChange, ...rest }) => {
  return (
    <input
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

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

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado el laboratorio de Campo de entrada no controlado. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.