mobx-react-form: Material UI SelectField onChange not working

Hi, I have implemented mobx-react-form successfully in my project but now I’m trying to get a SelectField working.

This is what I have.

// MaterialSelectFieldComponent.js

import React from 'react';
import {observer} from 'mobx-react';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

export default observer(({field}) => (
  <div>
    <SelectField {...field.bind()} >
      {field.options.map(({value,label}) => {
        return (<MenuItem key={value} value={value} primaryText={label} />)
      })}
    </SelectField>
  </div>
));

// bindings
  MaterialSelectField: {
    id: 'id',
    name: 'name',
    value: 'value',
    label: 'floatingLabelText',
    disabled: 'disabled',
    error: 'errorText',
    onChange: 'onChange',
  }

// fields
    a_dummy_field: {
      label: 'Nice Field',
      rules: 'required',
      bindings: 'MaterialSelectField',
      options: [{value:1, label: 'Yes'}]
    }

and <MaterialSelectField field={form.$('a_dummy_field')} />

With this the form, the field and its options are rendered, but selecting one option does not set the value in the select field. Am I missing something? Thanks in advance.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 39 (22 by maintainers)

Commits related to this issue

test: #218 — committed to foxhound87/mobx-react-form by foxhound87 7 years ago
fix: #218 — committed to foxhound87/mobx-react-form by foxhound87 7 years ago

Most upvoted comments

React Native does not have an event object passed to the onChange, as you can see in the official doc, you need to use onChangeText, this should work without bindings:

const handleOnChange = (field) => (text) => {
  field.set(text);
};

<TextInput 
  {...field.bind({ onChange: () => {} })}
  onChangeText: {handleOnChange(field)}
/>

foxhound87 on Aug 21, 2017

I’m so sorry @foxhound87 I tried again, just updated the package version to 1.20.0 and now this is working

const onChange = field => (e, k, payload) => {
  field.set(payload);
};

where payload is the actual value returned from SelectField. I was my mistake.

Thank you so much

ricbermo on Feb 23, 2017

Update the package and should work now!

foxhound87 on Feb 21, 2017

@foxhound87 payload is a number. In my fields for the User I have

    select_field: {
      label: 'Select Something',
      rules: 'required',
      bindings: 'MaterialSelectField',
      options: [{value:1, label: 'Selected Value'}]
    },

ricbermo on Feb 21, 2017