输入字段的React Bootstrap表单样式

Question

我正在尝试以一种样式设置表单输入的样式，从而使标签（例如用户名，电子邮件，密码）在单击时会自动从输入字段的中间移到左上角。

我在react.js中使用react-bootstrap，bootstrap

<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