代码之家 › 专栏 › 技术社区 › Vishal

Redux表单未自动接收onChange

redux-form reactjs javascript

Vishal · 技术社区 · 6 年前

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>

这是我的代码沙盒: https://codesandbox.io/s/yw7xj3vvx

1 回复 | 直到 6 年前

Vishal 6 年前

哦!天哪,这是一个很小的错误,被我当成了大错。我需要使用 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;

用法应保持不变。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前