Redux形式 - 仅当输入点击时才显示标签
问题描述:
我是使用redux-form的新手。我有一个渲染字段与各种元数据。Redux形式 - 仅当输入点击时才显示标签
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>
}
答
解决了最终代码。我设法通过将标签变量包装在自己感动的事件中来实现它。
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;
}
如果你尝试你的方法是什么问题了吗? –
好吧我设法让它工作 - 如果我换成{label} - {touch && {label}} - 但是当字段出现时字段会跳转 –
使标签 - display:block;身高:25px; - 这是固定的跳 –