React Native：模态内的日期选择器忽略模态的可见性

Question

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

如下所示，我在Modal中包装了DatePickerIOS。

最初根本不显示模式。这是通过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>

fix的示例：

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>