Cambiar el orden de los elementos enfocados en foco final -- reactjs campo con react-select campo con react-final-form camp Relacionados El problema

Change the order of the focused elements in final-form-focus


1
vote

problema

Español

Estoy usando final-form-focus CON react-final-form Para centrarse en el primer error, si hay algún error de validación en el envío. Tengo un componente personalizado react-select2 , por lo que estoy usando un método personalizado de FindInput como este:

  const findInput = (inputs, errors) =>   inputs.find(input => {     const name = input.name || input.dataset.name;     return name && getIn(errors, name);   });  const getFormInputs = name => () => {   if (typeof document === "undefined") {     return [];   }   const form = document.forms[name];   const inputs = form && form.length ? Array.prototype.slice.call(form) : []; // cast cheat to get from HTMLFormElement children to FocusableInput    // So far this is just copy-pasted from final-form-focus.   // It would return inputs here, but here is the magic:    const selectFields = Array.prototype.slice.call(     document.querySelectorAll("[data-select]")   );    const allInputs = inputs.concat(selectFields);    return allInputs; };  const focusOnError = focusDecorator(getFormInputs("pay-form"), findInput);   

Mi componente seleccionado está envuelto en un DIV y enfocado usando Ref Cómo este:

  const SelectInput = ({   input,   meta,   initialValue,   ...rest }) => {   const selectRef = React.createRef();    const setFocus = () => {     selectRef.current.focus();   };   return (     <div>       <div         className="input-wrapper"         tabIndex="0"         data-select         data-name={input.name}         onFocus={setFocus}       >         <Select           {...rest}           ref={selectRef}           onChange={value => input.onChange(value)}           value={input.value}           openMenuOnFocus={true}         />       </div>     </div>   ); };   

Pero la selección solo está enfocada al final de la línea, después de todos los demás componentes. Aquí está mi códigosANDBOX . ¿Hay alguna forma de cambiar el orden de los elementos enfocados de la misma manera que aparecen en el documento?

Original en ingles

I'm using final-form-focus with react-final-form to focus on first error, if there are any validation errors on submit. I have a custom react-select component, so I'm using a custom findInput method like this:

const findInput = (inputs, errors) =>   inputs.find(input => {     const name = input.name || input.dataset.name;     return name && getIn(errors, name);   });  const getFormInputs = name => () => {   if (typeof document === "undefined") {     return [];   }   const form = document.forms[name];   const inputs = form && form.length ? Array.prototype.slice.call(form) : []; // cast cheat to get from HTMLFormElement children to FocusableInput    // So far this is just copy-pasted from final-form-focus.   // It would return inputs here, but here is the magic:    const selectFields = Array.prototype.slice.call(     document.querySelectorAll("[data-select]")   );    const allInputs = inputs.concat(selectFields);    return allInputs; };  const focusOnError = focusDecorator(getFormInputs("pay-form"), findInput); 

My select component is wrapped in a div and focused using ref like this:

const SelectInput = ({   input,   meta,   initialValue,   ...rest }) => {   const selectRef = React.createRef();    const setFocus = () => {     selectRef.current.focus();   };   return (     <div>       <div         className="input-wrapper"         tabIndex="0"         data-select         data-name={input.name}         onFocus={setFocus}       >         <Select           {...rest}           ref={selectRef}           onChange={value => input.onChange(value)}           value={input.value}           openMenuOnFocus={true}         />       </div>     </div>   ); }; 

But the select is only focused at the end of the line, after all other components. Here is my codesandbox. Is there any way to change the order of the focused elements in the same way as they appear in the document?

        

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Parece que no hay una manera de establecer el atributo name en el <input/> a través de reaccionar, pero usted puede configurar el id VIA innerId .

Editar enfoque por error w / react-select

 

Looks like there's not a way to set the name attribute on the <input/> via React-Select, but you can set the id via innerId.

Edit focus on error w/ react-select

 
 

Relacionados problema

7  Use la respuesta de validación del lado del servidor en React-Admin  ( Use server side validation response in react admin ) 
En mi aplicación usando react-administrador Tengo algunas formas donde la validación debe realizarse en el lado del servidor. Mi API (implementada con la plat...

0  Mostrar errores devueltos a través de API - Reaccionar FORMULARIO FINAL  ( Showing errors returned via api react final form ) 
Estoy tratando de mostrar errores en línea devueltos a través de API, para cada campo inválido. Estoy siguiendo el ejemplo de errores de envío de aquí con a...

0  Reacciona la forma final que no funciona con TypeScript  ( React final form not working with typescript ) 
Quiero crear una reaccionar la forma final en un react-typescript ambiente. Recibo un error que me falta " onSubmit " propiedad en tipo {...} requerido por ...

1  Promise el retorno de la captura con Axios y Formulario Final  ( Promise return from catch with axios and final form ) 
Estoy iniciando sesión en un servicio API de un cliente de reacción con Axios. El formulario para nombre y contraseña se maneja por a0 . Todo funciona como s...

0  ¿Es posible almacenar números en valores de formulario?  ( Is it possible to store numbers in form values ) 
Estoy intentando escribir un campo a un número: <Form onSubmit={onSubmit} initialValues={{ target_type_id: 1 }} render={({ handleSubmit, ...

1  Claro reaccionar: DatePicker en el reinicio del formulario en forma de reacción-Final  ( Clear react datepicker on form reset in react final form ) 
Estoy usando reacción-FINAL-FORF y REACT-DatePicker. También tengo una selección por año. Las fechas de inicio y finalización deben establecerse al 1 de enero...

2  Reaccionar la forma final validate no funciona cuando la función de validación está fuera del reacción FC  ( React final form validate is not working when the validate function is outside o ) 
Tengo un componente de formulario en el que le proporciono una función de validación. Cuando defino la función de validación dentro del FC, funciona. Pero cua...

1  Gran forma de reacción, se extiende sobre múltiples secciones  ( Large react final form spread over multiple sections ) 
Estoy construyendo una forma grande que tiene múltiples secciones un solo botón de envío en un encabezado. Cuando alternaré las diferentes secciones del formu...

0  Validación personalizada con forma final de reacción  ( Custom validation with react final form ) 
Estoy tratando de agregar algunas validaciones personalizadas para permitir el único número (Amout) en los cuadros de entrada. Según el ejemplo dado en aquí ...

1  Especifique el valor inicial para el botón de radio  ( Specify initial value for radio button ) 
Quiero el botón de opción "Exact" para verificar cuando se abre un formulario: <Form onSubmit={onSubmit} initialValues={{ match_type: "exact" }...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos