Soy nuevo en reaccionar y estoy conectando un extremo frontal de reacción a un extremo posterior de matraz. Estoy en un proyecto grupal pero de alguna manera he sido responsable del 90% del trabajo. Implementé los campos con MUI pero soy flexible y prefiero trabajar sobre la apariencia.
Hice un formulario con ganchos de formulario de reacción e intenté implementar un control deslizante de rango personalizado (lamento que no esté todo dividido en componentes y sea principalmente un solo archivo). Soy nuevo en React, JS y TSX (hay un espacio aislado en la parte inferior de la publicación).
* Nota al margen: el formulario se está cargando bastante lento en este momento, cualquier consejo para mejorar el rendimiento sería muy apreciado. (: (En realidad, en este punto, agradecido por cualquier idea y abierto a comentarios).
Formulario de búsqueda avanzada
Lo que estoy tratando de lograr:
Estoy tratando de tomar la entrada como un rango de valores de 0 a 100 en un formulario. Los valores se pueden pasar como [0,100] por defecto o si se actualizan, al presionar enviar se enviarían los valores actuales ([min, max]) de su estado. La información se pasaría como una respuesta json a un backend de API a través de una solicitud posterior.
Encontré algunas opciones en línea para implementar un control deslizante de rango con forma de ganchos de reacción, pero desafortunadamente no pude hacer que ninguno de ellos funcionara. ¿Podría alguien ayudarme a implementar el control deslizante de rango (tendré que usar 3 de ellos en mi formulario)?
Si esto no es posible, ¿podría ayudarnos con una de las siguientes alternativas?
Opción 1: configurar un cuadro de selección/cuadro combinado que haga lo siguiente:
Proporciona al usuario una opción máxima o mínima basada en la opción máxima/mínima correspondiente. Es decir, si no hay ninguna entrada en el cuadro combinado/selección Max o Min: Entonces ambos cuadros tendrían 0-100 como posible rango de valores. Si se tocó el valor de un cuadro: entonces los valores del segundo campo seleccionado/combinado serían del resto correspondiente del rango.
Por ejemplo, si seleccioné 70 para mi valor mínimo, mi otra selección/combo me permitiría dejarlo en blanco o darme las opciones de 70 a 100. O si seleccioné 82 para el campo de entrada máximo, la selección para min solo sería permítame usar 0 a 82 para mi min o déjelo en blanco.
Opción 2: Campos de entrada de texto con el mismo esquema de validación que el anterior que se convertiría en un estado de error si el usuario ingresa algo como: Calificación del artista mín.: 40 Calificación del artista máx.: 20
Aquí está la caja de arena:
Gracias por actualizar la publicación.
Su problema es que Mui Slider Component no toma los accesorios de entrada predeterminados, por lo que no puede difundir el método de register devuelto por react-hook-form ya que devuelve el value predeterminado y los accesorios onChange .
Pero react-hook-form es una gran biblioteca y ya abordó la integración con las principales bibliotecas de UI de reacción: https://react-hook-form.com/get-started#IntegratingwithUIlibraries
Implementé un ejemplo básico aquí: https://codesandbox.io/s/wonderful-silence-9qlfbj?file=/src/App.js Exponen API bastante extensas y claras, tómese su tiempo para estudiarlas si planea usar como su biblioteca de gestión de formularios.
