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

Question

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

react-toggle 呈现如下切换：

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

给定一个 redux-form 字段组件，如下所示：

              <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 属性：

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

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

It will be a boolean for checkboxes, and a string for all other input types. If there is no value in the Redux state for this field, it will default to ''. This is to ensure that the input is controlled. If you require that the value be of another type (e.g. Date or Number), you must provide initialValues to your form with the desired type of this field.

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

您将在 Redux-Form Field documentation

中找到更多详细信息

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

How to use react-toggle with React redux-form?

reactjs

redux-form

react-redux-form

react-toggle