redux-form V6 custom component

4
votes

I want to create custom component for redux-form V6. It looks like buttons switcher.

component

import React, { Component } from 'react';

export default class ButtonSwitcher extends Component{
// props.buttons [{text: "Btn Text", value: "BtnValue"}]
  render (){
    return (
      <div className="btn-group" style={{verticalAlign: 'top'}}>
        {this.props.buttons.map((button, index)=>(
          <a href="#" key={index} onClick={this.props.onChange} className={(this.props.value === button.value) ? 'active btn btn-default' : 'btn btn-default'}>{button.text}</a>
        ))}
      </div>
    );
  }
}

I use this component in my form:

const renderButtonSwitcher = props => {
  return (
    <ButtonSwitcher value={props.input.value} onChange={props.input.onChange} buttons={props.data} />
  )
};

<Field name="PODType" component={renderButtonSwitcher} data={[{text: '%', value: 'percent'}, {text: '$', value: 'amount'}]} />

How i can get selected button value? I can't find any advanced examples from redux-form V6

onSubmit(data) {
  console.log("onSubmit", data);
}

onSubmit showing empty data object

3
reactjsredux-form

3 Answers

5
votes

I find the solution

Now my component looks:

import React, { Component } from 'react';

export default class ButtonSwitcher extends Component{
  // props.buttons [{text: "Btn Text", value: "BtnValue"}]

  onClick(value){
    this.props.onChange(value);
  }

  render (){
    return (
      <div className="btn-group" style={{verticalAlign: 'top'}}>
        {this.props.buttons.map((button, index)=>(
          <a href="#" key={index} onClick={this.onClick.bind(this, button.value)} className={(this.props.value === button.value) ? 'active btn btn-default' : 'btn btn-default'}>{button.text}</a>
        ))}
      </div>
    );
  }
}

Usage in form component:

const renderButtonSwitcher = props => {
      return (
        <ButtonSwitcher {...props.input} buttons={props.data} />
      )
    };

<Field name="PODType" component={renderButtonSwitcher} data={[{text: '%', value: 'percent'}, {text: '₽', value: 'amount'}]} />

I find this discussion and that gives me some ideas

1
votes

The way you are doing that is not the way redux-form works. The <Field /> Component is a wrapper for all the various html form fields like <input />, <textarea /> and so on.

Those fields have a name and value property which is used in Forms and by redux-form, too.

You are rendering <a />, which are simple links, so redux-form cannot get/set their values.

To get values out of those links, you need to work around, probably using a hidden field, which is updated when such a link is clicked.

1
votes

After referring to below link I got some idea.

https://redux-form.com/7.3.0/docs/faq/customcomponent.md/

I found a workaround as below:

<Field name="customCompValue" component={props => { props.input.onChange(newValueOfCustomComponent) return <MyCustomComponent someProp={props.input.value} /> }} />

After this, I was able to get the value of custom component along with other fields values in the form.