javascript - How to get value of child component TextInput of NavigatorIOS in react-native -

i have navigatorios component contains settings view. in settings view list of settings individually open own view when clicked on. when setting clicked on, arrow , right button appear, so:

i have function set when right button pressed called onrightbuttonpress inside of navigator's push function, called settings page bind settings page child. push function looks this:

  navheight(){     this.props.navigator.push({         title: 'height',         component: height,          rightbuttontitle: 'save',         passprops: {           units: this.state.units         },         onrightbuttonpress: () => {           console.warn("hey whats hello");           this.props.navigator.pop()}       })     } 

the height component that's rendered child looks this:

class height extends component{   render(){     return(         <view style={styles.settinginput}>         <text style={styles.inputrow}>height: </text>           <textinput ref="heightinput"           onchangetext={function(text){            console.warn(text);          }          }/>           <text style={styles.inputrowright}> m</text>       </view>     );       } } 

is there way access value of textinput in height component when onrightbuttonpress called? react-native version 0.27.2 if helps.

edit: want access text written inside of textinput when save button pressed. basically, don't want props passed child updated unless pressed.

just clarify, never used react-native, reactjs.

maybe pass function directly props , assign callback onchanguetext of textinput component.

const externalgetinputtext() => return this.refs.heightinput.value;   navheight() {     this.props.navigator.push({         title: 'height',         component: height,          rightbuttontitle: 'save',         passprops: {             units: this.state.units,             internalgetinputtext: externalgetinputtext         },         onrightbuttonpress: () => {           console.warn("hey whats hello");           const text = externalgetinputtext();           console.warn(text);           this.props.navigator.pop()}     }) }  class height extends component{     render(){         return(             <view style={styles.settinginput}>                 <text style={styles.inputrow}>height: </text>                 <textinput                     ref="heightinput"                      onchangetext={this.props.internalgetinputtext}                 />                 <text style={styles.inputrowright}> m</text>             </view>         );     } } 

last note, did't test it.