How to set values via code on wiizard with redux-form

2017-02-07 20:53
2017-02-07 20:53

Guten Tag!

Currently, I'm working on React.js with redux and redux-form on user acquisition page.
Today, I want to write about 3 things which I consumed much time and you might encounter.

  • How to set default value
  • Label selection with radio button
  • How to set a value automatically when a user put a value on another form.

On this article, I'm using

  • "react": "15.4.2"
  • "redux": "3.6.0"
  • "redux-form": "6.4.3"

How to set default value

If you're using basic form, simply you can use "initialValue".

const FirstForm = (props) -> (
  <div>
    ...
  </div>
)

export default reduxForm({
  form: "wizard",
  initialValue: { name: "My Name" }
})

However, when you're using wizard form on redux-form, it would be annoying. On wizard form, you can initialize the values only once. Though there is a way to reinitialize the values, I want to keep the values received from previous forms and of course, it's kind of stupid if you set those values in reinitialize function, isn't it?

If you set every value on your first form, it works. No worries. In my case, I wanted to set default value only when someone arrives a form because there are some branches on the acquisition flow and I want to know where a user has passed.

The implementation is really simple. Just you can use "change" method in "componentWillMount".

class FirstForm extends React.Component {
  componentWillMount() {
    this.props.change("form-name", "value");
  }
}

export default reduxForm({
  form: 'wizard',                 // <------ same form name
  destroyOnUnmount: false,        // <------ preserve form data
  forceUnregisterOnUnmount: true,  // <------ unregister fields on unmount
  validate
})(FirstForm);

Label selection with radio button

This sometimes happens when you want to customize your design on a radio button. This case also the answer is simple. You can implement just same as pure javascript.

# setSelection.js
const setSelected = element => {
  document.getElementById(element.currentTarget.htmlFor).checked = true
  element.currentTarget.className = "selected"

  return false
}

export default setSelected;

And in your component, you can call this function as an onClick method.

<label htmlFor="form-name" onClick={setSelected}>
...
</label>
<Field name="form-name" className="hidden">

How to set a value automatically when a user put a value on another form

I'm using react-phone-input library for international phone number. On this case, I prepared two input-forms. One is to receive user input served by the library. Another is hidden form to pass the value to Field component which served by redux-form. So once user input something on the form, I update the hidden form. Let me show.

<ReactPhoneInput
  defaultCountry="de"
  onChange={this.setPhoneNumber.bind(this)}
/>
<Field name="phone_number" type="text" component={renderPhoneNumberField} className="hidden" />

Here, ".bind(this)" is a key. It's important. You need to bind "this" context to use it after rendering in another method. If not, you would see this error message.
Uncaught TypeError: Cannot read property 'change' of undefined

So let's bind this as I wrote. Then in the method, what you have to do is same as others.

setPhoneNumber() {
  var phoneNumber = document.getElementsByClassName("react-tel-input")[0].children[0].value
  this.props.change("phone_number", phoneNumber)
}

That's it.


Hope it would be helpful for you.

Tschüs!

このエントリーをはてなブックマークに追加