Prefferable way to Override/append onChange event on Field

Hi, first thanks for this amazing component!

I am struggeling a bit with how to best append/override the onChange event on the Field component. What is the best practices here? I am still quite new to react and very new to redux so still trying to grasp the redux way of thinking, please keep this in mind of my question is trivial.

So, to put it very simple, I am having 2 selects where one will dispatch an action fetching new data through ajax, which the other select will render. I therefore need to pass some extra stuff happening to the onChange event for one of the dropdowns.

I’ve spent quite some hours investigating best approach for this but found older stuff mostly (this for instance; #624). Prefferable I would like to use the Field component doing this as its quite neat.

So far I’ve come up with this solution;

<Field
  name="category"
  component="select"
  className="form-control"
  disabled={this.props.categories.length === 0}
  props={{
    onChange: (e) => {
      this.props.change('category', e.target.value)
      this.props.handleCategoryChange(e)
    }
  }}
>
  <option value="">Select Category</option>
  {this.props.categories.map(option => <option value={option.id} key={option.id}>{option.name}    </option>)}
</Field>

The handleCategoryChange function is passed from the containerComponent of the form and dispatches the required action. This seems to work as intended, but as I am very new to redux and to redux-form I would appreciate to know if there is a better way dealing with this?

Feedback and input on this would be very appreciated.

[Limess]

I believe this was fixed by https://github.com/erikras/redux-form/pull/2385 (v6.5.0), you can now pass onChange as a prop to the <Field /> and it will be called on the change event prior to the redux-form input.onChange prop.

e.g

const Input = ({input: {onChange}}) => (
    <input onChange={onChange} />
);
...
const MyForm = () => (
    <Field onChange={myOnChange} component={Input} />
);

The order of calls will be myOnChange -> input.onChange.

[gustavohenke]

Hi @ntomallen, yes, it should, unless you call evt.preventDefault()