Best practice to manipulate a field's value

[mohebifar]

Assume that I need to change the value of username input field upon the change of last name field. The reason why the username should be kept on the input is to let the user manipulating it. The way to do it is to call the change action to change the value of username input. But we need to override the onChange prop on lastName input. It seems sloppy and I wonder if it has drawbacks.

<input {...lastName} />
<input {...username} />

[erikras]

The best practice to manipulate field2's value based on field1's value is to use a normalizer.

[mohebifar]

Thanks.
One other thing, let's say if there was no field1. For example, if we needed to change lat and lng pair input values by dragging around a marker on a Leaflet or Google map.

[erikras]

Same thing. If you want to restrict a value based on anything, you can "normalize" it. The code in the readme shows how to keep a string value in all upper case, for example. Just as easy to keep a lat-long coordinate within a certain radius.

[mohebifar]

I didn't mean to keep it in a certain radius. See the image. I mean changing those values by dragging that blue marker while the users can change it themselves.

Normalizing is done in reducer. What I say is in component layer.

[erikras]

Sure, that can be done with onChange calls. Ideally, you'd have a map component that would either call onChange as the user drags the marker, and/or onBlur when the marker was dropped.

[mohebifar]

I got it. 👍 Thanks.

[xcatliu]

@erikras, do you mean call the this.props.fields.xxx.onChange() directly?

[erikras]

@xcatliu Yes, you may do that. If onChange receives an event (if it was passed to an input), it will try to get the value from the event.target, but you can also just call onChange(newValue).

[xcatliu]

@erikras Thx~

[xcatliu]

@erikras How can I know the ending of onChange? Is there any API like this:

onChange(newValue, callback);

[erikras]

No, onChange is synchronous.

[xcatliu]

@erikras If I call this.props.handleSubmit() after onChange, the values seems not update. Code fragment:

handleClick() {
  // do something
  this.props.fields.xxx.onChange(newValue);
  console.log(this.props.values);                       // not update
  this.props.handleSubmit();                            // submit old values
}

However, if using setTimeout to wait for a second, everything goes well.

handleClick() {
  // do something
  this.props.fields.xxx.onChange(newValue);
  setTimeout(function() {
    console.log(this.props.values);                       // updated
    this.props.handleSubmit();                            // submit new values
  }, 1000 / 60);
}

[erikras]

That is true. The props get repopulated on a subsequent process tick.

I suspect that there is a flaw in your design if you are wanting to onChange and handleSubmit in the same code block. But you could conceivably do something like:

this.props.onSubmit({ // <---- what handleSubmit would call
  ...this.props.values,
  xxx: newValue
});