onChange on parent

[alexcroox]

I'd like to perform an action based on the value of a field form my parent controller, before the user submits the form, it's not related to validation.

Simplified example:

<EditRideForm
  onSubmit={this.onEditRide}
  initialState={this.state.form}
  rules={validationRules}
  validateOnChange={true}
  validateSingle={true}
  onChange={this.onChange}
  submitting={this.state.editingRide}
/>

this.onChange is never fired.

import head from 'ramda/src/head'
import compose from 'ramda/src/compose'
import { getValue, getCheckedValue } from '../../validation/helpers'

const Form = ({
  revalidation : { form, onChange, updateState, valid, errors = {}, onSubmit },
  onSubmit: onSubmitCb,
  submitting = false,
}) => (
    <TextField
        error={!isValid(errors.from)}
        value={form.from}
        onChange={compose(onChange('from'), getValue)}
        id="from"
        name="from"
        label="Leaving from"
      />
      {!isValid(errors.from) && (
        <FormHelperText>{head(errors.from)}</FormHelperText>
      )}
)

[busypeoples]

@alexcroox Will have a look at the problem.
I would say that you're using the revalidation onChange not the one you passed down via props.

const Form = ({
  revalidation : { form, onChange, updateState, valid, errors = {}, onSubmit },
  onSubmit: onSubmitCb,
  submitting = false,
  onChange: ownOnChange,
}) => (
  // ...
)

Would that solve the problem?

[alexcroox]

Ah makes sense, still no joy but can I confirm I'm configuring it correctly?

onFormChange = (field, value) => {
    console.log(field, value)
}

...

<EditRideForm
  onFormChange={this.onFormChange}
/>

const Form = ({
  revalidation : { form, onChange, updateState, valid, errors = {}, onSubmit },
  onSubmit: onSubmitCb,
  submitting = false,
  onChange: onFormChange,
}) => (

[busypeoples]

const Form = ({
  revalidation : { form, onChange, updateState, valid, errors = {}, onSubmit },
  onSubmit: onSubmitCb,
  submitting = false,
  onFormChange,
}) => (

and then use onFormChange directly.

If you're still having problems with the example, build a demo (on codesandbox.io i.e.) and we will solve it.

[alexcroox]

So I replace any instance of onChange with onFormChange inside my Form render? Does that still perform the normal validation however? That's why I'm concerned about, I need my own callback to do other things, but without it effecting the current onChange validation.

[busypeoples]

I understand the issue now. No, what you could is compose your onFormChange with onChange.
I will build an example later today or if you could build an example that would be even better, just to validate your case. No matter, we will have this solved.

[alexcroox]

Yer I'm still not entirely sure I follow sorry!

[busypeoples]

No problem. I think it would be best if I build an example.

[busypeoples]

Check the example: https://codesandbox.io/s/8kxppp90p9
Would that help solve your problem @alexcroox ?