Question

不确定我的代码是错误/怪癖还是错误。

如下面的代码中所示，我在DatePickerIOS内包含了Modal。

模态最初根本不会显示。这是通过showmodal状态值控制的，该值初始化为false。

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableHighlight, Modal, DatePickerIOS } from 'react-native';



export default class Logitem extends Component {

  constructor(props)  {
    super(props);
    const { logstringdate, bmi, weight, logdate } = this.props;
    this.state = {
      date: new Date(),
      weight: '80'
    };
  }

  state = {
    selecteddate: '',
    selectedweight: '',
    showmodal: false

  }

  setModalVisible = (visible) => {
    this.setState({showmodal: visible});
  }

  onWeightClick = () => {
      this.setState({ selecteddate: this.props.logdate, showmodal: true }, () => {

        console.log('Value in props==>' + this.props.logdate);
        console.log('The selecteddate in the state ==> ' + this.state.selecteddate);
      });

    }

    onDateChange(date) {
        this.setState({
          date: date
        });
      }



render() {

  return (

    <View style={styles.containerStyle}>
    <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.showmodal}
          onRequestClose={() => {alert("Modal has been closed.")}}
          >
         <View style={{marginTop: 22}}>
         <DatePickerIOS
           date={this.state.date}
           mode="date"
           onDateChange={(date) => this.onDateChange(date)}
           style={{ height: 150, width: 300 }}
         />
         </View>
        </Modal>
              <View style={styles.headerContentStyle}>
                    <Text>{this.props.logstringdate}</Text>
                    <Text>{this.props.bmi}</Text>
              </View>
              <View style={styles.thumbnailContainerStyle}>
                    <Text onPress={this.onWeightClick}>{this.props.weight}</Text>
              </View>
    </View>
  );

}
};

const styles = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2},
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop:10,
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
    flexDirection: 'row'

  },
  headerContentStyle: {
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
};

当应用程序启动时，我预计模式内的datepickerios（包裹）不会显示，因为它是模态的子项，并且模态的可见性设置为false。

但是应用程序启动时会显示datepickerios。

这是预期的行为吗？

Answer 1

constructor会覆盖您在其外部声明的state对象。

将它们全部移到构造函数中：

constructor(props)  {
    super(props);
    const { logstringdate, bmi, weight, logdate } = this.props;
    this.state = {
      date: new Date(),
      weight: '80',
      selecteddate: '',
      selectedweight: '',
      showmodal: false
    };
  }

您的情况示例：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      insideValue: 'inside value',
    }
  }

  state: {
    outsideValue: 'outside value'
  }

  render() {
    const { outsideValue, insideValue } = this.state;
    return (
      <div>
        <div>
          {outsideValue}
        </div>
        <div>
          {insideValue}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

修复示例：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      insideValue: 'inside value',
      outsideValue: 'outside value'
    }
  }

  render() {
    const { outsideValue, insideValue } = this.state;
    return (
      <div>
        <div>
          {outsideValue}
        </div>
        <div>
          {insideValue}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

React Native：Modal中的Datepickerios忽略Modal的可见性

1 个答案: