Redux形式 - 仅当输入点击时才显示标签

Question

我是使用redux-form的新手。我有一个渲染字段与各种元数据。

const renderField = ({ 
    input, 
    label, 
    type, 
    meta: { touched, error, warning } 
}) => 
    <div className='field'> 
    <label> 
     {label} 
     {touched && 
     ((
      error && 
      <span> 
       : {error} 
      </span>) || 
      (
      warning && 
       <span> 
       : {warning} 
       </span> 
     ))} 
    </label> 
    <div> 
     <input {...input} placeholder={label} type={type} /> 
    </div> 
    </div> 

我想重构这个 - 所以标签只显示 - 一旦用户点击了输入。

它会是这样的东西？

{touched && 
    <label> 
    {label} 
    {touched && 
     ((
     error && 
      <span> 
      : {error} 
      </span>) || 
     (
      warning && 
      <span> 
       : {warning} 
      </span> 
    ))} 
    </label> 
} 

---

Answer 1

解决了最终代码。我设法通过将标签变量包装在自己感动的事件中来实现它。

const renderField = ({ 
    input, 
    label, 
    type, 
    meta: { touched, error, warning } 
}) => 
    <div className='field'> 
    <label> 
     {touched && 
     <span> 
      {label} 
     </span> 
     } 
     {touched && 
     ((
      error && 
      <span className="error"> 
       : {error} 
      </span>) || 
      (
      warning && 
      <span className="warning"> 
       : {warning} 
      </span> 
     ))} 
    </label> 
    <div> 
     <input {...input} placeholder={label} type={type} /> 
    </div> 
    </div> 

CSS

label{ 
    display:block; 
    height: 24px; 
}