将 Material-ui ToggleButtonGroup 连接到 redux-form

Question

我正在尝试使用 redux 形式连接 material-ui ToggleButtonGroup 并遇到问题。这是我的代码：

<Field
  name='operator'
  component={FormToggleButtonGroup}
>
  <ToggleButton value='equals'>Equal</ToggleButton>
  <ToggleButton value='not_equals'>Not equal</ToggleButton>
</Field>

.. 和我的组件，传递给字段：


const FormToggleButtonGroup = (props) => {
  const {
    input,
    meta,
    children
  } = props;

  return (
    <ToggleButtonGroup
      {...input}
      touched={meta.touched.toString()}
    >
      {children}
    </ToggleButtonGroup>
  );
};

export default FormToggleButtonGroup;

问题是，当我 select 值（切换选项）时，selected 值没有传递给 redux 存储，它仅在失去焦点后传递然后抛出错误 'newValue.splice is not a function' 请帮助处理这个问题

Sandbox with sample code

Answer 1

玩这个组件我终于找到了解决方案。我需要手动分配从 ToggleButtonGroup 组件获得的新值并将该值放入 redux 存储。这是工作代码的样子：

const FormToggleButtonGroup = (props) => {
  const {
    input,
    meta,
    children,
    ...custom
  } = props;

  const { value, onChange } = input;
  return (
    <ToggleButtonGroup
      {...custom}
      value={value}
      onChange={(_, newValue) => {
        onChange(newValue);
      }}
      touched={meta.touched.toString()}
    >
      {children}
    </ToggleButtonGroup>
  );
};

主要变化是获取 redux 的 onChange 函数并使用新值调用它，在值切换时选择。有一个与 ToggleButtonGroup 组件相关的 onChange 和另一个与 Redux 相关的 onChange 。需要在ToggleButtonGroup的onChange发生时调用后者

将 Material-ui ToggleButtonGroup 连接到 redux-form

Connect Material-ui ToggleButtonGroup to redux-form

javascript

reactjs

material-ui

redux-form

togglebutton