如何使用React redux-form進行react-toggle？

Question

是否可以使用Redux形式的react-toggle ？

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

並將其設置為Field組件的component prop：

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

警告：根據值prop文檔 ，需要定義value類型。

它將是復選框的布爾值，以及所有其他輸入類型的字符串。 如果此字段的Redux狀態中沒有值，則默認為''。 這是為了確保輸入受到控制。 如果您要求該值為其他類型（例如日期或數字），則必須為表單提供具有所需類型此字段的initialValues。

因此，您需要在redux-form中為復選框定義初始值。

您可以在Redux-Form Field文檔中找到更多詳細信息