如何使用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 
 
    } 
 
    } 
 
}