如何在react-native中获得NavigatorIOS的子组件TextInput的值

Question

I have a NavigatorIOS component that contains a settings view. In that settings view is a list of settings that individually open up their own view when clicked on. When that setting is clicked on, a back arrow and a right button appear, like so:

I have a function set for when the right button is pressed called onRightButtonPress that is inside of my navigator's push function, which is called from the settings page to bind the settings page to the child. My push function looks like this:

  navHeight(){
    this.props.navigator.push({
        title: 'Height',
        component: Height,

        rightButtonTitle: 'Save',
        passProps: {
          units: this.state.units
        },
        onRightButtonPress: () => {
          console.warn("hey whats up hello");
          this.props.navigator.pop()}
      })
    }

The Height component that's rendered as a child looks like 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 any way to access the value of the TextInput in the Height component when onRightButtonPress is called? My react-native version is 0.27.2 if that helps.

Edit: I Specifically only want to access the text written inside of the TextInput when the Save button is pressed. Basically, I don't want any props passed to the child to be updated unless it is pressed.

Answer 1

Just to clarify, I never used react-native, just reactjs.

Maybe you could pass a function directly to the props and assign it as a callback for the onChangueText of the 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 up 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, I did't test it.