reactjs - 如何将 react-toggle 与 React redux-form 一起使用？

Question

是否可以将react-toggle与 Redux 表单一起使用？

react-toggle 像这样呈现一个切换：

<Toggle
  icons={false}
  onChange={this.handleToggleChange}
/>

给定一个像这样的 redux-form Field 组件：

              <Field
                name="email_newsletter"
                id="email_newsletter"
                component="input"
                type="checkbox"
              />

react-toggle 如何更新 redux-form 字段的值？

Answer 1

您可以像这样定义自定义渲染器：

export const renderToggleInput = (field) => (
  <Toggle checked={field.input.value} onChange={field.input.onChange} icons={false} />
);

并将其设置为组件的component道具Field：

<Field
    name="email_newsletter"
    id="email_newsletter"
    component={renderToggleInput}
/>

警告：根据value prop 文档，value需要定义类型。

它将是复选框的布尔值，以及所有其他输入类型的字符串。如果该字段在 Redux 状态中没有值，则默认为 ''。这是为了确保输入受到控制。如果您要求该值是另一种类型（例如日期或数字），您必须为您的表单提供该字段所需类型的初始值。

因此，您还需要在 redux-form 中为您的复选框定义初始值。

您将在Redux-Form Field 文档中找到更多详细信息