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;
}

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

1 个答案: