{"action":"opened","issue":{"url":"https://api.github.com/repos/ryanswapp/react-meteor-template/issues/5","labels_url":"https://api.github.com/repos/ryanswapp/react-meteor-template/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/ryanswapp/react-meteor-template/issues/5/comments","events_url":"https://api.github.com/repos/ryanswapp/react-meteor-template/issues/5/events","html_url":"https://github.com/ryanswapp/react-meteor-template/issues/5","id":108783729,"number":5,"title":"Accessing FormInput Values","user":{"login":"nicholasalanbrown","id":3259022,"avatar_url":"https://avatars.githubusercontent.com/u/3259022?v=3","gravatar_id":"","url":"https://api.github.com/users/nicholasalanbrown","html_url":"https://github.com/nicholasalanbrown","followers_url":"https://api.github.com/users/nicholasalanbrown/followers","following_url":"https://api.github.com/users/nicholasalanbrown/following{/other_user}","gists_url":"https://api.github.com/users/nicholasalanbrown/gists{/gist_id}","starred_url":"https://api.github.com/users/nicholasalanbrown/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nicholasalanbrown/subscriptions","organizations_url":"https://api.github.com/users/nicholasalanbrown/orgs","repos_url":"https://api.github.com/users/nicholasalanbrown/repos","events_url":"https://api.github.com/users/nicholasalanbrown/events{/privacy}","received_events_url":"https://api.github.com/users/nicholasalanbrown/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-09-29T02:40:21Z","updated_at":"2015-09-29T02:40:21Z","closed_at":null,"body":"Great template.\r\n\r\nI see you're using jQuery to access the values of form inputs. It seems like the React docs suggest you should be using refs, but I can't get this to work with your C.FormInput component. Any idea how i\"d do it this way?\r\n\r\nHere' s my code:\r\n```\r\nC.FormInput = React.createClass({\r\n    propTypes: {\r\n        hasError: React.PropTypes.bool,\r\n        label: React.PropTypes.string,\r\n        type: React.PropTypes.string,\r\n        name: React.PropTypes.string,\r\n        ref: React.PropTypes.string,\r\n        value: React.PropTypes.string,\r\n        onKeyUp: React.PropTypes.func,\r\n        onBlur: React.PropTypes.func\r\n    },\r\n    shouldComponentUpdate() {\r\n        return true;\r\n    },\r\n    render() {\r\n        const {type, label, name, ref, value, onKeyUp, onBlur } = this.props;\r\n        console.log(name);\r\n        let inputType;\r\n\r\n        var className = \"form-group\";\r\n        if (this.props.hasError) {\r\n            className += \" has-error\";\r\n        }\r\n\r\n        switch (type) {\r\n            case \"textarea\":\r\n                inputType = (\r\n                  <textarea type={ type } className=\"form-control\" name={ name.toLowerCase() } ref={ name } placeholder={ name } defaultValue={ value } onKeyUp={ onKeyUp } onBlur={ onBlur }></textarea>\r\n                );\r\n                break;\r\n            default:\r\n                inputType = (\r\n                  <input type={ type } className=\"form-control\" name={ name.toLowerCase() } ref={ name } placeholder={ name } defaultValue={ value } onKeyUp={ onKeyUp } onBlur={ onBlur }/>\r\n                );\r\n                break;\r\n        }\r\n\r\n\r\n        return (\r\n          <div className={ className }>\r\n              { label === \"none\" ? \"\" : <label htmlFor={ name.toLowerCase() } className=\"control-label\">{ name }</label> }\r\n              { inputType }\r\n          </div>\r\n        )\r\n\r\n    }\r\n});\r\n\r\nC.PostCreateForm = React.createClass({\r\n    displayName: 'PostCreateForm',\r\n    mixins: [ReactMeteorData, React.addons.LinkedStateMixin],\r\n    getMeteorData() {\r\n        var subCategories = Meteor.subscribe('categories');\r\n        var categories = Categories.find({}).fetch();\r\n        return {\r\n            categoriesReady: subCategories.ready(),\r\n            categories: categories,\r\n            currentUser: Meteor.user(),\r\n        };\r\n    },\r\n    getInitialState() {\r\n        return {\r\n            errors: {}\r\n        }\r\n    },\r\n    handleSubmit: function(e) {\r\n        e.preventDefault();\r\n        var title = React.findDOMNode(this.refs.title).value.trim();\r\n        var slug = slugify(title);\r\n        var author = this.data.currentUser._id;\r\n        var category = React.findDOMNode(this.refs.category).value.trim();\r\n        var summary = React.findDOMNode(this.refs.summary).value.trim();\r\n        var content = React.findDOMNode(this.refs.content).value.trim();\r\n        var published = false;\r\n\r\n        if (!title || !author || !category || !summary || !content) {\r\n            return;\r\n        }\r\n        Posts.insert({\r\n            'title': title,\r\n            'slug': slug,\r\n            'author': author,\r\n            'category': category,\r\n            'createdAt': new Date(),\r\n            'summary': summary,\r\n            'content': content,\r\n            'published': published\r\n        }, function(error, result) {\r\n            if (error) {\r\n                console.log('error');\r\n            } else {\r\n                FlowRouter.go('singlePost', {\r\n                    _id: result\r\n                });\r\n            }\r\n        });\r\n        React.findDOMNode(this.refs.title).value = '';\r\n        React.findDOMNode(this.refs.category).value = '';\r\n        React.findDOMNode(this.refs.summary).value = '';\r\n        React.findDOMNode(this.refs.content).value = '';\r\n        return;\r\n    },\r\n    getCategories() {\r\n        var options = this.data.categories.map(function (doc) {\r\n            var option = {};\r\n            option.value = doc._id;\r\n            option.label = doc.title;\r\n          return option;\r\n        });\r\n        return options;\r\n    },\r\n    render: function() {\r\n        if (!this.data.categoriesReady) {\r\n            loading = <SpinnerView />\r\n        }\r\n        return (\r\n            <div className=\"container col-lg-6 col-lg-offset-3\">\r\n        <h1>Create a Post</h1>\r\n        <form className=\"commentForm\" onSubmit={this.handleSubmit}>\r\n          <div className=\"form-group\">\r\n            <input className=\"form-control input-lg\" type=\"title\" ref=\"title\" placeholder=\"Post title\" />\r\n          </div>\r\n          <div className=\"form-group\">\r\n            <C.Dropdown options={this.getCategories()} name=\"category\" ref=\"category\"/>\r\n          </div>\r\n          <div className=\"form-group\">\r\n            <textarea className=\"form-control\" type=\"textarea\" cols=\"50\" ref=\"summary\" placeholder=\"Summary\" />\r\n          </div>\r\n          {/* <div className=\"form-group\">\r\n            <textarea className=\"form-control\" rows=\"20\" type=\"textarea\" cols=\"50\" ref=\"content\" placeholder=\"Content\" />\r\n          </div> */}\r\n          <C.FormInput hasError={!!this.state.errors.email} ref=\"content\" type=\"textarea\" name=\"content\" label=\"none\" />\r\n          <div className=\"form-group\">\r\n            <a className=\"btn btn-success btn-lg btn-block\" onClick={this.handleSubmit}>Post</a>\r\n          </div>\r\n        </form>\r\n      </div>\r\n        );\r\n    }\r\n});\r\n\r\nC.Dropdown = React.createClass({\r\n    displayName: 'Dropdown',\r\n  render: function() {\r\n    var self = this;\r\n    var categories = this.props.options.map(function (doc) {\r\n      return (\r\n        <option value={doc.value} ref={self.props.name} key={doc._id} >\r\n          {doc.label}\r\n        </option>\r\n      );\r\n    });\r\n    return (\r\n      <select className=\"form-control\">\r\n        {categories}\r\n      </select>\r\n    );\r\n    }\r\n});\r\n"}}