javascript - Redux-form如何在勾选复选框时更新/附加特定值到initialValue中的键

Question

我正在使用 material-ui 和 redux-form 来控制带有多个复选框的 Web 表单，我例外的是在勾选复选框时，它将调度一个动作来更新值（语言：['English'] -> 语言： ['English', 'Spanish']）以 redux-form 而不是添加新属性（例如Spanish:true），问题可能是我为每种语言注册了不同的文件，有人可以帮忙吗？

这是复选框的屏幕截图

这是代码： 复选框

import React from 'react';
import { Field } from 'redux-form';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';

const renderCheckbox = ({ input, label }) => (
  <div>
    <FormControlLabel
      control={<Checkbox checked={!!input.value} onChange={input.onChange} />}
      label={label}
    />
  </div>
);

export class FormCheckbox extends React.Component {
  render() {
    const { languages, label } = this.props;
    return (
      <>
        <div>
          {languages.map((language, index) => (
            <Field
              key={index}
              name={language.name}
              label={language.name}
              component={renderCheckbox}
            />
          ))}
        </div>
      </>
    );
  }
}

index.js

const languages = ['Spanish', Norwegian]
  <FormCheckbox
     name={'languages'}
     label={'configuration.agent.language'}
     languages={languages}
   />

const mapStateToProps = (state, ownProps) => ({
   initialValues: {language: ['English']}

const mapDispatchToProps = dispatch => ({});

let Form = reduxForm({
   form: 'SelectForm',
   enableReinitialize: 'true',
})(Form);

如何解决这个问题呢？

标签： javascriptreactjsreduxreact-reduxredux-form