Entrada de rango no controlada

Introducción

En este laboratorio, exploraremos cómo crear un elemento de entrada de rango no controlado en React que permita a los usuarios seleccionar valores de un rango de números deslizando un botón a lo largo de una línea horizontal. Utilizaremos una función de devolución de llamada para pasar el valor seleccionado al componente padre. Al final de este laboratorio, tendrás una mejor comprensión de cómo utilizar el evento onChange y la propiedad defaultValue en React.

Skills Graph

Entrada de rango no controlada

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.

Para crear un deslizador en React, use el componente Slider y pase las propiedades min, max, defaultValue y onValueChange.

En el componente Slider, establezca el type del elemento <input> en "range" para crear un deslizador. Utilice la prop defaultValue heredada del padre como el valor inicial del campo de entrada no controlado. Utilice el evento onChange para activar la devolución de llamada onValueChange y enviar el nuevo valor al padre.

Aquí está el código del componente Slider:

const Slider = ({
  min = 0,
  max = 100,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <input
      type="range"
      min={min}
      max={max}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

Para renderizar el componente Slider, use ReactDOM.createRoot y pase la función de devolución de llamada onValueChange:

ReactDOM.createRoot(document.getElementById("root")).render(
  <Slider onValueChange={(val) => console.log(val)} />
);

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

¡Felicidades! Has completado el laboratorio de Entrada de Rango No Controlado. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.