0

estoy creando un input con react, la verdad esta quedando bien, el estilo es lo deseado, pero si al llamar al componente mas de una vez, pueden notar que hay problemas a la hora de mover el span que simula ser el placeholder se queda quieto y no retoma lo que tiene que hacer, simplemente no reacciona y se queda en su lugar, les dejo el código acá

import React from 'react'
import styled, { css } from 'styled-components'
import PropTypes from 'prop-types'

const ContainerInput = styled.div`
  width: 15rem;
  height: 3rem;
  display: flex;
  align-items: center;
  border-radius: .5rem;
  position: relative;
  padding: .5rem;
  border: solid 2px #fff;
`;

const ContainerPlaceholder = styled.span`
  transition: all .3s;
  background-color: #121212;
  padding: .1rem;
  color: #ffffff88;
  ${props => props.move && css`
    transform: translate(0px, -130%);
    font-size: 12px
  `}
`;

const Input = styled.input`
  width: 93%;
  height: 100%;
  background-color: transparent;
  outline: none;
  border: none;
  position: absolute;
  color: #fff
`;

const InputComponent = ({placeholder, type, onChange, value, name}) => {

  const [ userFocus, setUserFocus] = React.useState(false)

  const handleFocus = () => {
    if(String(value).trim() !== "") return 
    setUserFocus(true)
  }

  const handleBlur = () => {
    if(String(value).trim() !== "") return 
    setUserFocus(false)
  }

  return (
    <ContainerInput>
      <ContainerPlaceholder move={userFocus}>
        {placeholder}
      </ContainerPlaceholder>
      <Input name={name} value={value} onChange={onChange} type={type} onFocus={handleFocus} onBlur={handleBlur} />
    </ContainerInput>
  )
}

InputComponent.prototype = {
  placeholder: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired
}

export default InputComponent

les faltan algunas mejora al componente, pero recien lo estoy empezando, les dejo un link de codesanbox para que puedan verlo en accion

2
  • Hola, pudiste solucionarlo?
    – b3lg1c4
    Commented el 8 ene. 2021 a las 19:37
  • aun no, es un proyecto de componentes para subir a npm
    – Enzo
    Commented el 8 ene. 2021 a las 23:03

1 respuesta 1

1

Pude solucionar el problema. Estaba en el state: "value" de App.js. Lo que hice fue inicializar 2 estados para cada input, o sea uno para Usuario y otro para Contraseña.

`import React from "react";
import "./styles.css";
import Input from "./components/imput";

export default function App() {
  //const [value, setValue] = React.useState({ usuario: "", password: "" });
  const [usuario, setUsuario] = React.useState("");
  const [contraseña, setContraseña] = React.useState("");

  const handelInput = (e) => {
    const inputValue = e.target.value;
    if (e.target.name === "usuario") {
      setUsuario(inputValue);
    } else {
      setContraseña(inputValue);
    }
  };

  return (
    <div className="App">
      <Input
        type="text"
        value={usuario}
        placeholder="usuario"
        name="usuario"
        onChange={handelInput}
      />
      <Input
        type="password"
        value={contraseña}
        placeholder="password"
        name="password"
        onChange={handelInput}
      />
    </div>
  );
}`

Te adjunto el link del código para que lo pruebes: https://codesandbox.io/s/spring-rain-960rg?file=/src/App.js

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.