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

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.

My code:

//I skipped imports here

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

componentDidMount = () => { this.sourceFormStore.fetchCatalogs(); }

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

handleDescriptionChange = (e) => { const value = e.target.value; this.sourceFormStore.description = value; }

handleCommandChange = (e) => { const value = e.target.value; this.sourceFormStore.command = value; this.sourceFormStore.clearSchemaAndResults(); }

handleCatalogChange = (value) => { this.sourceFormStore.catalog = value; }

handleChangeParamenter = () => { this.sourceFormStore.clearResults(); }

handleRemoveParameter = () => { this.sourceFormStore.clearResults(); }

handleSubmit = (event) => { event.preventDefault(); form.validate() .then((response) => { if (response.isValid) { this.props.sourceListStore.add({ name: form.$('name').value, description: form.$('description').value, command: form.$('commandName').value, type: 'sql', parameters: this.parameterStore.parameters, schema: this.sourceFormStore.schema, catalog: form.$('catalog').value }); this.props.router.push('/sources/index'); } else { form.invalidate('Primero debes rellenar el formulario!'); this.sourceFormStore.snackBarStore.setMessage(form.error); } }); }

test = () => { this.sourceFormStore.testSource({ command: this.sourceFormStore.command, parameters: this.parameterStore.parameters, catalog: this.sourceFormStore.catalog }); }

handleMyFieldOnChange = field => (e) => { console.log('is in my handler!!!!!'); console.log('e: ', e.target.value); console.log('field: ', field); field.set(e.target.value); this.sourceFormStore.name = e.target.value; }

render() { console.log('props', this.props); const results = this.sourceFormStore.results; const gridColumns = this.sourceFormStore.schema.map((s) => { return { Header: s.name, accessor: s.name, minWidth: 150, maxWidth: undefined }; });

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) })}**
        />
        <br />
        <TextField
          {...form.$('description').bind()}
        />
        <br />
        <TextField
          {...form.$('commandName').bind()}
        />
        <br />
        <SelectField
          {...form.$('catalog').bind()}
        >
          {this.sourceFormStore.catalogs.map((catalog) => {
            return <MenuItem key={catalog} value={catalog} primaryText={catalog} />;
          })
          }
        </SelectField>
        <br />
        <h4>Parametros de Entrada</h4>
        <ParameterBuilder
          parameters={this.parameterStore.parameters}
          store={this.parameterStore}
          validationStore={this.validationStore}
          schema={this.sourceFormStore.schema}
          handleRemoveParameter={this.handleRemoveParameter}
        />
        <br />
        <RaisedButton
          label="Vista Previa"
          primary
          onClick={this.test}
        />
        <br />
        <div className="horizontal-table">
          {gridColumns.length > 0 &&
            <ReactTable
              loading={this.sourceFormStore.fetching}
              data={results}
              columns={gridColumns}
              showPagination={false}
              noDataText="No hay información de fuentes de datos"
            />
          }
        </div>
        <br />
        <FlatButton label="Cancelar" onClick={() => { this.props.router.push('/sources/index'); }} />
        <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 { // we can choose a name as key MaterialTextFieldReimplemented: ({ $try, field, props }) => ({ type: $try(props.type, field.type), 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, field.onChange), onFocus: $try(props.onFocus, field.onFocus), onBlur: $try(props.onBlur, field.onBlur) }), 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;

Seems you submitted this issue in the wrong repository

Op di 15 aug. 2017 om 17:06 schreef SebastianMuniz <notifications@github.com

:

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.

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' }, description: { label: 'Descripción', placeholder: 'Descripción del Origen', rules: 'required|string|between:1,50|alpha_num', bindings: 'MaterialTextField' }, commandName: { label: 'Comando SQL a Ejecutar', placeholder: 'Nombre de Comando', rules: 'required|string|between:1,10|alpha', bindings: 'MaterialTextField' }, catalog: { label: 'Catalogo', rules: 'required', bindings: 'MaterialSelectField' } }; const form = new MyForm({ fields }, { plugins });

@Inject https://github.com/inject('sourceListStore') @Inject https://github.com/inject('snackBarStore') @Observer https://github.com/observer class SourceForm extends Component { constructor(props) { super(props); }

componentDidMount = () => { this.sourceFormStore.fetchCatalogs(); }

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

handleDescriptionChange = (e) => { const value = e.target.value; this.sourceFormStore.description = value; }

handleCommandChange = (e) => { const value = e.target.value; this.sourceFormStore.command = value; this.sourceFormStore.clearSchemaAndResults(); }

handleCatalogChange = (value) => { this.sourceFormStore.catalog = value; }

handleChangeParamenter = () => { this.sourceFormStore.clearResults(); }

handleRemoveParameter = () => { this.sourceFormStore.clearResults(); }

handleSubmit = (event) => { event.preventDefault(); form.validate() .then((response) => { if (response.isValid) { this.props.sourceListStore.add({ name: form.$('name').value, description: form.$('description').value, command: form.$('commandName').value, type: 'sql', parameters: this.parameterStore.parameters, schema: this.sourceFormStore.schema, catalog: form.$('catalog').value }); this.props.router.push('/sources/index'); } else { form.invalidate('Primero debes rellenar el formulario!'); this.sourceFormStore.snackBarStore.setMessage(form.error); } }); }

test = () => { this.sourceFormStore.testSource({ command: this.sourceFormStore.command, parameters: this.parameterStore.parameters, catalog: this.sourceFormStore.catalog }); }

handleMyFieldOnChange = field => (e) => { console.log('is in my handler!!!!!'); console.log('e: ', e.target.value); console.log('field: ', field); field.set(e.target.value); this.sourceFormStore.name = e.target.value; }

render() { console.log('props', this.props); const results = this.sourceFormStore.results; const gridColumns = this.sourceFormStore.schema.map((s) => { return { Header: s.name, accessor: s.name, minWidth: 150, maxWidth: undefined }; });

return (

Nuevo Origen de datos

{this.sourceFormStore.catalogs.map((catalog) => { return ; }) }

Parametros de Entrada

{gridColumns.length > 0 && }

{ this.props.router.push('/sources/index'); }} />

);

} } export default SourceForm;

AND MyForm component:

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

bindings() { return { // we can choose a name as key MaterialTextFieldReimplemented: ({ $try, field, props }) => ({ type: $try(props.type, field.type), 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, field.onChange), onFocus: $try(props.onFocus, field.onFocus), onBlur: $try(props.onBlur, field.onBlur) }), 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;

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mobxjs/mobx-react/issues/311, or mute the thread https://github.com/notifications/unsubscribe-auth/ABvGhIgk116ucybrm4-hCfYMLemJ5RZ2ks5sYbPygaJpZM4O3tPN .

mobxjs / mobx-react

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

Nuevo Origen de datos

Parametros de Entrada