{"action":"created","issue":{"url":"https://api.github.com/repos/kadirahq/mantra/issues/174","repository_url":"https://api.github.com/repos/kadirahq/mantra","labels_url":"https://api.github.com/repos/kadirahq/mantra/issues/174/labels{/name}","comments_url":"https://api.github.com/repos/kadirahq/mantra/issues/174/comments","events_url":"https://api.github.com/repos/kadirahq/mantra/issues/174/events","html_url":"https://github.com/kadirahq/mantra/issues/174","id":144795530,"number":174,"title":"Regarding calling child component's function from parent","user":{"login":"simsim0709","id":10040154,"avatar_url":"https://avatars.githubusercontent.com/u/10040154?v=3","gravatar_id":"","url":"https://api.github.com/users/simsim0709","html_url":"https://github.com/simsim0709","followers_url":"https://api.github.com/users/simsim0709/followers","following_url":"https://api.github.com/users/simsim0709/following{/other_user}","gists_url":"https://api.github.com/users/simsim0709/gists{/gist_id}","starred_url":"https://api.github.com/users/simsim0709/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/simsim0709/subscriptions","organizations_url":"https://api.github.com/users/simsim0709/orgs","repos_url":"https://api.github.com/users/simsim0709/repos","events_url":"https://api.github.com/users/simsim0709/events{/privacy}","received_events_url":"https://api.github.com/users/simsim0709/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-03-31T05:44:33Z","updated_at":"2016-03-31T06:40:39Z","closed_at":null,"body":"Hello, \r\n\r\nHow can I call child component's function? \r\n\r\nI tried like this.\r\n\r\nParent Component\r\n`\r\n\r\n    import React from 'react';\r\n    import ReactDOM from 'react-dom';\r\n    import {Row, Col} from 'react-bootstrap';\r\n    import {TextField, RaisedButton} from 'material-ui';\r\n    import TagInput from '../../tag/containers/tag_input';\r\n\r\n    const btnStyle = {\r\n      margin: 12\r\n    };\r\n\r\n    class PageWrite extends React.Component {\r\n\r\n      createPage(event) {\r\n        if (event && event.preventDefault) {\r\n          event.preventDefault();\r\n        }\r\n\r\n        const { create, getTags } = this.props;\r\n        const { titleRef, tagInputRef } = this.refs;\r\n       \r\n       **// this tagInputRef.getValue() function is not defined.**\r\n        console.log('tag input value', tagInputRef.getValue());\r\n      }\r\n\r\n      render() {\r\n        const { error } = this.props;\r\n        return (\r\n          <Row>\r\n            <Col md={12}>\r\n              <TextField\r\n                fullWidth={true}\r\n                hintText=\"Title here...\"\r\n                ref=\"titleRef\"\r\n              />\r\n            </Col>\r\n            <Col md={12}>\r\n              <div className=\"page-write\">\r\n                <TagInput\r\n                  ref=\"tagInputRef\"\r\n                />\r\n                <RaisedButton\r\n                  label=\"Draft\"\r\n                  secondary={true}\r\n                  onClick={this.createPage.bind(this)}\r\n                  style={btnStyle}\r\n                />\r\n                <RaisedButton\r\n                  label=\"Publish\"\r\n                  primary={true}\r\n                  onClick={this.createPage.bind(this)}\r\n                  style={btnStyle}\r\n                />\r\n              </div>\r\n              {error ? <p style={{ color: 'red' }}>{error}</p> : null}\r\n            </Col>\r\n          </Row>\r\n        );\r\n      }\r\n     }\r\n    export default PageWrite;\r\n`\r\n\r\nChild Component \r\n`\r\n\r\n    import React from 'react';\r\n    import ReactDOM from 'react-dom';\r\n\r\n    class TagInput extends React.Component {\r\n      getValue() {\r\n        return this.input ? this._getInputNode().value : undefined;\r\n      }\r\n\r\n      _getInputNode() {\r\n        return this.props.children ? this.input.getInputNode() : ReactDOM.findDOMNode(this.input);\r\n      }\r\n\r\n      render() {\r\n        console.log('this', this);\r\n        return (\r\n          <div>\r\n            <input\r\n              type=\"text\"\r\n              value={this.props.tagValues}\r\n            />\r\n          </div>\r\n        );\r\n      }\r\n    }\r\n\r\n    export default TagInput;\r\n`\r\n"},"comment":{"url":"https://api.github.com/repos/kadirahq/mantra/issues/comments/203785355","html_url":"https://github.com/kadirahq/mantra/issues/174#issuecomment-203785355","issue_url":"https://api.github.com/repos/kadirahq/mantra/issues/174","id":203785355,"user":{"login":"sammkj","id":9153498,"avatar_url":"https://avatars.githubusercontent.com/u/9153498?v=3","gravatar_id":"","url":"https://api.github.com/users/sammkj","html_url":"https://github.com/sammkj","followers_url":"https://api.github.com/users/sammkj/followers","following_url":"https://api.github.com/users/sammkj/following{/other_user}","gists_url":"https://api.github.com/users/sammkj/gists{/gist_id}","starred_url":"https://api.github.com/users/sammkj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sammkj/subscriptions","organizations_url":"https://api.github.com/users/sammkj/orgs","repos_url":"https://api.github.com/users/sammkj/repos","events_url":"https://api.github.com/users/sammkj/events{/privacy}","received_events_url":"https://api.github.com/users/sammkj/received_events","type":"User","site_admin":false},"created_at":"2016-03-31T06:40:39Z","updated_at":"2016-03-31T06:40:39Z","body":"`this.refs.tagInputRef` is only available after the component is rendered. Try putting it in `componentDidMount()` block."}}