Question

我正在使用redux-form 6.0.0-rc.4，我想知道是否有办法将额外的属性传递给我的Field。

这是我的renderField组件：

const renderField = field => (
  <div className={field.touched && field.error ? 'invalid' : 'valid'}>
    <label>{field.input.placeholder}</label>
    <input {...field.input} />
    {field.touched && field.error && <span><i className="fa fa-warning"></i> {field.error}</span>}
  </div>
);

我的Field：

<Field name="addressOne" type="text" placeholder="Address One" component={renderField} />

我希望能够将帮助文本直接传递给Field，以便将其包含在renderField中。文档显示redux-form非常灵活，但似乎没有一种简单的方法可以实现这一点。

编辑 -

当我说“帮助文本”时，我的意思是指导用户的一些副本。例如，在日期字段中，我想添加“所选日期必须从现在起两个工作日”的行，而在选择字段上可能是“请从列表中只选择一个”。显然，每个领域都会有所不同。

Answer 1

这非常简单：您传递给Field的所有不被redux-form使用的道具都会被简单地传递给组件。我已经在您的示例中添加了helpText，以向您展示它是如何工作的。

const renderField = field => (
  <div className={field.touched && field.error ? 'invalid' : 'valid'}>
    <span>{field.helpText}</span>
    <label>{field.input.placeholder}</label>
    <input {...field.input} />
    {field.touched && field.error && <span><i className="fa fa-warning"></i> {field.error}</span>}
  </div>
);

And Field：

<Field name="addressOne" type="text" placeholder="Address One" component={renderField} helpText="This is my custom help text." />

这在redux-form v6的Field documentation中被注明为第3点。

将帮助文本传递给redux-form

1 个答案: