如何使用onChangeText回调函数将值传递给另一个页面？

Question

我刚刚遇到了一个问题，当我使用react native navigator组件时，事情是我有一个index.ios.js，它只是呈现导航器场景，其中有一个默认组件被称为默认页面，在此index.ios .js还有一个用于下一步操作的Navigator.NavigationBar组件。并且默认组件有一个TextInput组件供用户输入某物。

所以我的问题是我想检查，如果TextInput组件（在默认页面）不是null或空当用户点击主页面中的下一步按钮，我真的没有找到一种方式，可以通过onTextChange回调函数在运行时的值，重写Navigator组件是否会在这种情况下工作？但我仍然不知道该怎么做。

这东西真的给我带来很多压力。

here is the UI of the demo.

谢谢。

Answer 1

您可以在主页面中定义一个状态，并定义一个函数来设置给定值的状态。您可以将此函数传递给具有文本字段的页面。然后，您可以在文本字段的onChangeText上调用此函数，从而在主页面上设置状态。然后，您可以成功检查主组件中的状态，以检查它是否为空。

// i am assuming here that you pass the setMyText from the 'Main' component below as prop to this compoenet. 
 
class MyTextInputComponent extends Component { 
 
    render() { 
 
    return (
 
     <TextInput onChangeText={this.props.setMyText} /> 
 
    ) 
 
    } 
 
} 
 

 
class Main extends Compoenent { 
 
    constructor() { 
 
    super() 
 
    this.state = { 
 
     myText: '' 
 
    } 
 
    } 
 
    
 
    // you can pass this function to your component that has the text view like 'MyTextInputCompoenent' below 
 
    setMyText = (text) => { 
 
    this.setState({ 
 
     myText: text 
 
    }) 
 
    } 
 
    
 
    // here you can check if the this.state.myText is empty or not before continuing 
 
    onClickNext =() => { 
 
    if(this.state.myText) { 
 
     // do sth 
 
    } else { 
 
     // do sth else 
 
    } 
 
    } 
 
}