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

并将其设置为 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 中找到更多详细信息