reactjs - 如何将自定义 radio 组设置为 redux 形式

Question

我应该怎么做才能将 ColoredRadioGroup 设置为我的表单状态？尝试了 redux-form 文档中的一些东西，但没有帮助。我听说过传递 onChange 和 value Prop ，但我不确定在我的情况下该怎么做。

ColoredRadioGroup.js:

class CustomRadioGroup extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      value: props.defaultValue,
    };
  }

  setValue = (value) => {
    this.setState(() => ({ value }));
  };

  handleChange = (event) => {
    if (this.props.onChange) {
      this.props.onChange(this.props.data.filter(elem => elem.value === event.target.value)[0]);
    }
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <RadioGroup
        style={this.props.groupStyle}
        name={this.props.groupName}
        value={this.state.value}
        onChange={this.handleChange}
      >
        <FormControlLabel
          value="green"
          control={
            <GreenRadio
              icon={<CheckBoxOutlineBlankIcon />}
              checkedIcon={<CheckBoxIcon />}
            />
          }
        />
        <FormControlLabel
          value="yellow"
          control={
            <YellowRadio
              icon={<CheckBoxOutlineBlankIcon />}
              checkedIcon={<CheckBoxIcon />}
            />
          }
        />
    ...
      </RadioGroup>
    );
  }
}

export default CustomRadioGroup;

在表单文件中:

  <Field
    component={props => <ColoredRadioGroup value={props.input.value} />}
    name="agent_group"
    type="radio"
  />

Answer 1

当您将组件包装在 Field 中时redux-form 将通过 props 传递输入和元对象。以您的方式，您只传递 props.input.value Prop 。您需要在 handleChange 中使用 props.input.onChange 来更新 redux 存储中的特定字段。像这样重构它:

 <Field
  component={ColoredRadioGroup}
  name="agent_group"
/>

您应该会在自定义组件中看到 Prop 。

看https://redux-form.com/8.1.0/docs/api/field.md/#props了解更多信息。