Redux表單未自動接收onChange

Question

我創建了一個組件，如下所示：

import React from 'react';
import PropTypes from 'prop-types';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';

import { noop } from '../../utils';

const ButtonGroup = ({ options, value, onChange }) => {
  console.log(onChange, 'onChange');
  console.log(value, 'value');
  return (
    <ToggleButtonGroup
      value={value}
      exclusive
      onChange={(event, val) => { onChange(val); }}
    >
      {
        options.map(option => (
          <ToggleButton value={option}>
            {option}
          </ToggleButton>
        ))
      }
    </ToggleButtonGroup>
  );
};

ButtonGroup.propTypes = {
  options: PropTypes.arrayOf(PropTypes.any),
  onChange: PropTypes.func,
  value: PropTypes.string,
};

ButtonGroup.defaultProps = {
  options: [],
  onChange: noop,
  value: '',
};

export default ButtonGroup;

我正在嘗試按以下方式使用它：

  <Form onSubmit={handleSubmit(onCreateElement)}>
    <label htmlFor="element-type">Select an option</label>
    <div className="selectable">
      <Field
        name="element-type"
        className="form-field"
        component={ButtonGroup}
        options={['One', 'Two', 'Three']}
      />
    </div>
    <button type="submit">Submit</button>
  </Form>

但是redux-form永遠不會將其onChange方法傳遞給我的組件。 因此，我的組件不會更改所選值。

這是我的密碼箱： https ://codesandbox.io/s/yw7xj3vvx

Answer 1

哦! 天哪，這是一個很小的錯誤，我把它當作大錯誤。 我需要在props.input.onChange內部使用props.input.value和props.input.onChange 。 因此，我的新代碼應如下所示：

import React from 'react';
import PropTypes from 'prop-types';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';

import { noop } from '../../utils';

const ButtonGroup = ({ options, input }) => {
  return (
    <ToggleButtonGroup
      value={input.value}
      exclusive
      onChange={(event, val) => { input.onChange(val); }}
    >
      {
        options.map(option => (
          <ToggleButton value={option}>
            {option}
          </ToggleButton>
        ))
      }
    </ToggleButtonGroup>
  );
};

ButtonGroup.propTypes = {
  options: PropTypes.arrayOf(PropTypes.any),
  input: PropTypes.objectOf(PropTypes.any),
};

ButtonGroup.defaultProps = {
  options: [],
  input: {},
};

export default ButtonGroup;

用法應保持不變。