Trouble understanding how to update input fields with Meteor & React

react
1

I’m trying to get my feet wet using React with Meteor and I keep stumbling into road blocks. It’s getting discouraging.

My latest was my attempt to create allow the user to edit their profile. I can’t seem to wrap my head around how getMeteorData works with state. I load the user data with getMeteorData, I can fill my form fields with it, however I’m not sure how to deal with the onChange handler (i called it changeHandler in the code) to update the field. So I can select my field boxes but I can’t see any updates or changes.

Can someone help me out?

getMeteorData() {
        let handle = Meteor.subscribe("userData");
        let userData = {};

        if (handle.ready()) {
            return {
                userData: Meteor.user() 
            };
        }
    },
changeHandler(e) {
        },
        render() {
            console.log(this.data.userData);
            return(
                <div className="page-body">
                    <div className="ui middle aligned center aligned grid">
                        <div className="column modal-small">
                            <h2 className="ui teal image header">
                                <div className="content">
                                    Edit Profile
                                </div>
                            </h2>
                            <form className="ui large form" onSubmit={this.onSubmitForm}>
                                <div className="ui stacked segment">
                                    <div className="field">
                                        <label>Email Address</label>
                                        <input type="text" name="email" value={this.data.userData.email} onChange={this.changeHandler} />
                                    </div>
                                    <div className="field">
                                        <label>First Name</label>
                                        <input type="text" name="firstName" value="" onChange={this.data.userData.profile.firstName} />
                                    </div>
                                    <div className="field">
                                        <label>Last Name</label>
                                        <input type="text" name="lastName" value="" onChange={this.data.userData.profile.lastName} />
                                    </div>
                                    <input type="submit" className="ui fluid large teal submit button" value="Update" />
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            )
        }
2

Read https://facebook.github.io/react/docs/forms.html and pay attention to the controlled vs uncontrolled inputs. With meteor apps, you will want controlled inputs.

You will most likely want to set state fields in your changeHandler function, and then take variables from state and update a mongo record / call a method from form submit handler.

3

Right. That’s sort of what I tried but what state am I setting…or how do I refer to it. I tried this.data.userData etc, but nothing happens.

4

I am new to React, but here are my thoughts after looking at your code.

this.data is data your component is receiving from a reactive meteor data source that you define in getMeteorData() . But you are referencing it in an onChange handler. The onChange handler should define a function in your component that you want to call when the input changes, for example. onChange = {this.validateInput}. Having onChange={this.data.x.y} probably won’t do much.

5

Oh hah whoops yeah that was supposed to be in value.

6

The solution is relatively simple, just use defaultValue instead of value…

<input className="form-control input-lg" defaultValue={userName} ref="userName" placeholder="Nombre de usuario" />

…

1 Like
7

controlled input is boring and boring, in most common case, i just use uncontrolled input element and let form2js grabs all values.

<form onSubmit={handleSubmit} />
    <input type='text' name='title' defaultValue={'this is a title'} />
    <input type='text' name='tags[]' defaultValue={'tuts'} />
    <input type='text' name='meta.blah.blah' defaultValue={'blah blah blah'} />
    <input type='submit' value='submit' />
</form>

 function handleSubmit(e) {
   e.preventDefault()
   const form = e.target
   form.id = Random.id()
   const Values = form2js(form.id)
   console.log(Values) // all values from input
     // values look like {
   title: 'this is a title',
     tags: ['tuts'],
     meta: {
       blah: {
         blah: 'blah blah blah'
       }
     }
 }
8

Go through the link. It might help you