Soy un principiante en React/Preact y me enfrento a un problema que no entiendo. Tengo entradas de radio para elegir un componente (FormInput) para mostrar según un estado:
{ this.state.radio === true ? <FormInput id="keyword" name="keyword" required={true}>Keyword</FormInput> : <FormInput id="url" name="url" required={true} placeholder="https://" pattern={'https://.*'} >URL</FormInput> } La keyword se muestra primero, luego muestro la url y vuelvo a la keyword . La representación del HTML es correcta, pero cuando vuelvo a la entrada de keyword , los accesorios de esta entrada son los accesorios de la entrada de url .
Pero si cambio la representación html agregando <></> por ejemplo, no tengo el problema:
{ this.state.radio === true ? <><FormInput id="keyword" name="keyword" required={true}>Keyword</FormInput></> : <FormInput id="url" name="url" required={true} placeholder="https://" pattern={'https://.*'} >URL</FormInput> }¿Qué estoy haciendo mal, por favor? Gracias.
Editar: código FormInput:
export function FormInput(props: InputProps) { const { id, name, value = '', required = false, disabled = false, readonly = false, type = 'text', autocomplete = 'off', pattern, children, placeholder = children, title = '', setRef, handleValueChange = () => {} } = props; let {classInputName = '', classGroupName = ''} = props; classInputName = classNames('form-control', classInputName) classGroupName = classNames('form-group', classGroupName) let inputDom = setRef; if(!setRef){ inputDom = useRef(null) as Ref<HTMLInputElement>; } const onInput = useCallback((e: any) => { handleValueChange(name, e.target.value,); }, []); return ( <div class={classGroupName}> {children ? <label for={id}>{children}{required ? <span title="Required" rel="tooltip" class="required badge badge-empty rounded-circle ml-2"/> : ''}</label> : <></>} <input ref={inputDom} {...{id, name, type, required, disabled, readonly, pattern, onInput, placeholder, value, autocomplete, title}} class={classInputName} /> </div> ) }Cuando cambia el componente FormInput , React intentará reutilizar el anterior para el rendimiento, por lo que mantendrá los accesorios del anterior, cuando use <></> para envolver la palabra clave FormInput , reaccionar sabe que los componentes hermanos son diferentes, para que no reutilice su componente anterior, puede intentar agregar un accesorio key diferente al componente FormInput , así para indicar que son diferentes:
{ this.state.radio === true ? <FormInput key="keyword" id="keyword" name="keyword" required={true}>Keyword</FormInput> : <FormInput key="url" id="url" name="url" required={true} placeholder="https://" pattern={'https://.*'} >URL</FormInput> }Más información: https://reactjs.org/docs/lists-and-keys.html#gatsby-focus-wrapper