Как установить пользовательскую группу радиостанций в форму редукса - PullRequest
Новая
       17

Как установить пользовательскую группу радиостанций в форму редукса

2 голосов
/ 25 марта 2019

Что я должен сделать, чтобы установить ColoredRadioGroup в состояние моей формы? Пробовал кое-что из документов в редукционной форме, но это не помогло. Я слышал о передаче onChange и значениях реквизита, но я не уверен, как это сделать в моем случае.

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"
  />

1 Ответ

0 голосов
/ 26 марта 2019

Когда вы оборачиваете свой компонент в Field redux-форма будет передавать входные и мета-объекты через реквизит. на вашем пути вы только пропускаете props.input.value проп. вам нужно использовать props.input.onChange в вашем handleChange, чтобы обновить это конкретное поле в хранилище резервов. рефакторинг это так: 

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

, и вы должны увидеть реквизиты в своем пользовательском компоненте.

Подробнее см. https://redux -form.com / 8.1.0 / docs / api / field.md / # props .

...