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

时间:2016-06-10 21:56:14

标签: javascript reactjs react-native ecmascript-6 state

我有一个包含设置视图的NavigatorIOS组件。在该设置视图中,是一个设置列表,单击时单独打开自己的视图。单击该设置时,会出现后退箭头和右箭头,如下所示: back arrow and right button

我有一个函数设置,当按下右键时调用Sub findmatch() Dim inarr() As Variant Dim oarr() As Variant Dim i As Long Dim str() As String Dim j As Integer Dim ws As Worksheet Dim tws As Worksheet Dim rng As Range Set tws = Sheets("Sheet2") 'This sheet is where the lookup list is located Set ws = Sheets("Sheet1") ' this is the list of names Set rng = tws.Range("A1", tws.Cells(tws.Rows.Count, 1).End(xlUp)) inarr = ws.Range("A1", ws.Cells(ws.Rows.Count, 1).End(xlUp)).Value ReDim oarr(1 To UBound(inarr, 1), 1 To 1) For i = 1 To UBound(inarr, 1) str = Split(inarr(i, 1), "-") For j = 0 To UBound(str) Dim fnd fnd = Application.Match(str(j), rng, 0) If Not IsError(fnd) Then oarr(i, 1) = rng(fnd) Exit For End If oarr(i, 1) = "None" Next j Next i ws.Range("B1").Resize(UBound(oarr, 1)).Value = oarr End Sub ,该按钮位于我的导航器的onRightButtonPress功能中,该功能从设置页面调用以绑定设置页面对孩子。我的push函数如下所示:

push

作为孩子呈现的高度组件如下所示:

  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()}
      })
    }

在调用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> ); } } 时,有没有办法访问TextInput组件中Height的值?如果有帮助的话,我的本机版本是0.27.2。

编辑:我特别只想在按下“保存”按钮时访问TextInput内部写入的文本。基本上,除非被按下,否则我不希望任何传递给孩子的道具被更新。

1 个答案:

答案 0 :(得分:0)

为了澄清,我从来没有使用过反应原生,只是反应。

也许您可以将函数直接传递给道具并将其指定为onChangueText组件的TextInput的回调。

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>
        );
    }
}

最后一点,我没有测试过。