javascript - 如何制作一个浮动标签，当焦点或在 React 中有内容时可以向上移动？

Question

我正在尝试创建一个输入组，当输入集中或内部有内容时，标签将像这样向上移动：

input {
  padding: 10px 0;
  box-sizing: border-box;
  box-shadow: none;
  outline: none;
  border: none;
  border-bottom: 2px solid #999;
  width: 100%;
}

.box {
  margin: 100px;
  position: relative;
}

label {
  position: absolute;
  top: 10px;
  left: 0;
  color: #999;
  transition: .5s;
  pointer-events: none;
}

input:focus~label,
input:valid~label {
  top: -12px;
  left: 0;
  color: crimson;
  font-weight: bold;
}

<div class="box">
  <input type="text" required='' id="name">
  <label for="name">Name</label>
</div>

<div class="box">
  <input type="text" required='' id="email">
  <label for="name">email</label>
</div>

但是我不知道如何在 React 中执行此操作，我也可以知道如何不使用 html 中的 required 和 css 中的 input:valid 方法，因为我通过 js 中的 Formik 表单管理验证。太感谢了！

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div className="form-group">

  <Field type="text" name="name" placeholder="Name" onFocus={this.handleInputFocus} onBlur={this.handleInputBlur} className={formProps.errors.name && formProps.touched.name ? 'is-invalid form-control' : 'form-control'} />
  <label htmlFor="name">Name</label>

  <ErrorMessage name="email" component="div" className="invalid-feedback" />
</div>

<div className="form-group">

  <Field type="text" name="email" placeholder="Email" onFocus={this.handleInputFocus} onBlur={this.handleInputBlur} className={formProps.errors.email && formProps.touched.email ? 'is-invalid form-control' : 'form-control'} />
  <label htmlFor="email">Email</label>

  <ErrorMessage name="email" component="div" className="invalid-feedback" />
</div>

标签： javascriptcssreactjsinputlabel

Answer 1

十分感谢大家！我只是找到了一种方法来做到这一点：D！但是我不确定是否有更好的方法可以使 Formik 中的多个输入的代码更清晰。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
        name: '',
        email:'',
        nameActive: false,
        emailActive: false
    }
  }
  activateField=(e)=> { 
    console.log();
    this.setState({
     [`${e.target.name}Active`]: true
    })
   
  }
  
  disableField=(e)=> {
    this.setState({
      [`${e.target.name}Active`]: false
   })
 }

 disableFocus=(e)=> {
  if (e.target.value === "") {
        this.disableField(e);
   }
 }

 handleChange=(e)=> {
  this.setState({
   [e.target.name]: e.target.value,
  });
   if (e.target.value === "") {
      this.disableField(e);
   } else {
      this.activateField(e);
   }

  
 }
  
  
  render() {
    return (
      <div>
    <form>
     <div className="field-group">
     <label className={this.state.nameActive ? "active" : ""}>
       Name
     </label>
     <input
      className="normal"
      type="text"
      value={this.state.name}
      onFocus={this.activateField}
      onBlur={this.disableFocus}
      onChange={this.handleChange}
       name="name"
     />
     </div>
      
      
      
     <div className="field-group">
      <label className={this.state.emailActive ? "active" : ""}>
       Email
      </label>
      <input
      className="normal"
      type="text"
      value={this.state.email}
      onFocus={this.activateField}
      onBlur={this.disableFocus}
      onChange={this.handleChange}
      name="email"
      />
     </div>
      
      
    </form>
   </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

input {
  padding: 10px 0;
  box-sizing:border-box;
  box-shadow:none;
  outline:none;
  border:none;
  border-bottom: 2px solid #999;
  width:100%;
}

.field-group {
  margin:100px;
  position:relative;
}
label  {
  position:absolute;
  top:10px;
  left:0;  
  color: #999;
  transition:.5s;
  pointer-events:none;
  
}

label.active {
  transform: translateY(-25px);
  transition:.5s;
  color: crimson;
  font-weight:bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>