将Material-ui ToggleButtonGroup连接到redux-form

npm install redux-form @material-ui/core

yarn add redux-form @material-ui/core

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer,
  // 其他的reducers...
});

export default rootReducer;

import React from 'react';
import { Field } from 'redux-form';
import { ToggleButtonGroup, ToggleButton } from '@material-ui/core';

const MyForm = () => {
  return (
    <form>
      <Field name="myField" component={renderToggleButtonGroup} />
      {/* 其他表单字段 */}
    </form>
  );
};

const renderToggleButtonGroup = ({ input }) => {
  const { value, onChange } = input;

  const handleToggle = (event, newValue) => {
    onChange(newValue);
  };

  return (
    <ToggleButtonGroup value={value} onChange={handleToggle}>
      <ToggleButton value="option1">Option 1</ToggleButton>
      <ToggleButton value="option2">Option 2</ToggleButton>
      <ToggleButton value="option3">Option 3</ToggleButton>
    </ToggleButtonGroup>
  );
};

export default MyForm;

import React from 'react';
import { reduxForm } from 'redux-form';

// ...

const MyForm = () => {
  // ...
};

export default reduxForm({
  form: 'myForm', // 表单的唯一标识符
})(MyForm);