Question

我该怎么做才能将ColoredRadioGroup设置为表单状态？尝试了Redux形式的文档中的一些内容，但没有帮助。我听说过要传递onChange和value道具，但是我不确定该如何做。

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将通过prop传递输入和元对象。以您的方式，您只会传递props.input.value道具。您需要在props.input.onChange中使用handleChange来更新redux存储中的特定字段。像这样重构它：

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

，您应该在自定义组件中看到道具。

查看https://redux-form.com/8.1.0/docs/api/field.md/#props以获得更多信息。

如何将自定义广播组设置为redux形式

1 个答案: