Question

当我使用react native navigator组件时，我遇到了一个问题，就是我有一个index.ios.js，它只是渲染导航器场景，在这个索引中有一个名为default page的默认组件。 ios.js还有一个Navigator.NavigationBar组件，用于下一步操作。默认组件有一个TextInput组件供用户输入......

所以我的问题是，当用户点击主页面中的下一步按钮时，我想检查TextInput组件（在默认页面中）是否为空或空，我真的没有找到一种方法可以通过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
    }
  }
}

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

1 个答案: