Question

我有这个模态组件：

    export default class PopUpModal extends Component {
   constructor() {
      super();
      //this.state = {windowVisible: false};
   }
   openModal = () => {
      this.props.onToggle(true);
   }
   closeModal = () => {
      console.log('Pressing CLOSE');
      this.props.onToggle(false);
   }
   setMessage = (text) => {
       this.props.modalText = text;
   }
   render() {

      return (

        <Modal style={styles.modal} position={"center"} swipeToClose={false} backdropPressToClose={false} visible={this.props.windowVisible} 
        onRequestClose={() => {this._setModalVisible(false)}} >
                <View style={styles.modalContentContainer}>
                <TouchableHighlight onPress={() => {
                  this.closeModal();
                }}>

                <Text>{this.props.modalText}</Text>
                </TouchableHighlight>

                </View>
            </Modal>
      );

   }
}

在场景中渲染。而且我已经设法让两者之间的行动起作用，并使用＆＃34; setModalVisible＆＃34; E.I.但我想在场景中操纵/更改this.props.modalText的值，因为它会显示可能不同的错误消息。

这是场景中的相关代码：

    export default class LoginScene extends Component {

  constructor(p) {
    super(p);

    this.state = {
      email: '',
      password: '',
      windowVisible: false,
      modalText: '',
    };

  }
    onTogglePopUpWindow =(value) => {
    console.log('PRESSING UP');
    this.setState({windowVisible: value});
  }

  render() {

    const { email, password } = this.state;

    return (
      <View style={styles.container}>


        {this.state.windowVisible ? <PopUpModal
          windowVisible={this.state.windowVisible} 
          onToggle={this.onTogglePopUpWindow}
        /> : null}

所以我真的没有关于此事的代码，因为我甚至不确定如何开始。但我想要实现的是让我的PopUpModal组件中的<Text>元素值改变，这取决于我写的一些if语句。基本上从LogInScene设置它的值。

提前致谢。

Answer 1

我不确定我是否理解你的需要。您似乎想要将来自LoginScene的数据（modalText）传递给PopUpModal组件。

你可以将它作为道具传递。

<PopUpModal
    windowVisible={this.state.windowVisible} 
    onToggle={this.onTogglePopUpWindow}
    modalText={this.state.modalText}      
        />

然后在PopUpModal组件中，您将可以访问此模态文本。

export default class PopUpModal extends Component {
   constructor() {
      super();
      console.log(this.props.modalText)
   }

React Native操纵组件之间的值

1 个答案: