Redux 表单 - 仅在单击输入时显示标签答案

【问题标题】：Redux form - show label only when input clickedRedux 表单 - 仅在单击输入时显示标签
【发布时间】：2017-09-04 12:40:10
【问题描述】：

我是使用 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>
}

【问题讨论】：

如果你尝试你的方法，你的问题是什么？
好吧，我设法让它工作了——如果我包装 {label}——{touched && {label}}——但是当它进入时字段会跳转存在
制作标签 - 显示：块；高度：25px； - 这是固定的跳跃
太棒了，你自己解决了 :)
是的 - 我不确定 - 是否有类似 onclick 的东西 - 而不是被触摸。

标签： reactjs redux-form

【解决方案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;
}

【讨论】：