I can't get field object in my component, please help!!!

[SebastianMuniz]

files.zip

Hey Claudio, I been trying to use your library, and I can’t get my head around the following thing. Where did “field” come from??? I been trying to wire my own field handler let’s say “handleMyFieldOnChange" to your field handler. I had read all your blog post and docs but I cant figure out where you get that field object from. I have a React component and I want to link my field handler to your field store so when the input changes I validate but also I add the data to my ObjectStore. I tried implementing custom bindings, but I still dont get how to bind a method from my own React component. I dont know if I explain well myself, I would really appreciatte a little of help with this. I will leave you my code here and I attached those files

My code:

// I skipped imports here

const plugins = { dvr: validatorjs };
const fields = {
 name: {
  label: 'Nombre',
  placeholder: 'Nombre del Origen de Datos',
  rules: 'required|string|between:1,20|alpha_num',
  bindings: 'MaterialTextField'
}
};
const form = new MyForm({ fields }, { plugins });

@Inject('sourceListStore')
@Inject('snackBarStore')
@Observer
class SourceForm extends Component {
 constructor(props) {
  super(props);
}

handleNameChange = (e) => {
 const value = e.target.value;
 this.sourceFormStore.name = value;
}

handleSubmit = (event) => {
 // More code here
}

handleMyFieldOnChange = field => (e) => {
 console.log('is in my handler!!!!!');
 console.log('field: ', field);
}

render() {
 console.log('props', this.props);

return (
<div>
    <h2>Nuevo Origen de datos</h2>
    <Paper style={style}>
      <form onSubmit={this.handleSubmit}>
        <TextField
          {...form.$('name').bind()}
          {...this.props.field.bind({ onChange: this.handleMyFieldOnChange(this.props.field) })}
        />
        <RaisedButton
          label="Guardar"
          primary
          type="submit"
        />
      </form>
    </Paper>
  </div>
);
}
}
export default SourceForm;

AND MyForm component:

class MyForm extends MobxReactForm {

onChange = field => (event, key, value) => {
field.set('value', value);
};

bindings() {
return {
MaterialTextField: {
id: 'id',
name: 'name',
type: 'type',
value: 'value',
label: 'floatingLabelText',
placeholder: 'hintText',
disabled: 'disabled',
error: 'errorText',
onChange: 'onChange',
onBlur: 'onBlur',
onFocus: 'onFocus',
autoFocus: 'autoFocus',
},
MaterialSelectField: ({ $try, field, props }) => ({
id: $try(props.id, field.id),
name: $try(props.name, field.name),
value: $try(props.value, field.value),
floatingLabelText: $try(props.label, field.label),
hintText: $try(props.placeholder, field.placeholder),
errorText: $try(props.error, field.error),
disabled: $try(props.disabled, field.disabled),
onChange: $try(props.onChange, this.onChange(field)),
})
};
}
}

export default MyForm;

[foxhound87]

You get the field instance with form.$('name') and you can wire the handler in this way:

        <TextField
          {...form.$('name').bind({ 
              onChange: this.handleMyFieldOnChange(form.$('name')) 
          })}
        />

[SebastianMuniz]

I though i tried that, I'm feeling a little embarrased right now. Thanks you very much!!! I was neeeding this to complete a task this week and you saved us! Really thank you!!