React Bootstrap Стиль формы поля ввода - PullRequest
Новая
       37

React Bootstrap Стиль формы поля ввода

1 голос
/ 25 мая 2020

Я пытаюсь оформить поля ввода таким образом, чтобы при нажатии метки (например, имя пользователя, адрес электронной почты, пароль) автоматически перемещался из среднего в верхний левый угол поля ввода.

I я использую response- bootstrap, bootstrap в реакции. js 


<Form id="register-form" className="signup-form" onSubmit={handleSubmit}>
          <FormGroup controlId="name" bsSize="lg">
              <p className="form-label" htmlFor="name">
                Full Name
              </p>
              <div className="input-field">
              <img 
                src="images/icons/name.svg" 
                className="input-field-image" 
                alt="organisation name" height="28" width="28"
              />
              <FormControl 
                autoFocus
                className="form-control-lg"
                name="name" 
                type="text" 
                placeholder="Name" 
                onChange={handleFieldChange}
                value={fields.name}        
              />
              </div>
              <span className="validation-message"/>
          </FormGroup>
</Form>

В настоящее время у меня есть как заполнитель, так и метка, но я хотел бы переместить метку внутри поля и включить эту анимацию onClick .

также ссылка на CodeSandbox: https://codesandbox.io/s/awesome-roentgen-2tizc?file= / src / App. js

...