Question

我正在尝试在自己的系统中实现react-native-modal-datetime-picker 应用

道具

export default class App extends React.Component {  
constructor(props) {
    super(props);
    this.state = {
      cdate: '',
     setDate: '',
     isVisible: false,
     setVisible: false
    };
  }

源代码

import React, { Component } from "react";
    import {
      View,
      ScrollView,
      DatePickerIOS,
      TouchableOpacity,
      Text,
      TextInput,
      Button,
      StyleSheet
    } from "react-native";
    import RBSheet from "react-native-raw-bottom-sheet";
    import data from "./static.json";

import DateTimePicker from 'react-native-modal-datetime-picker'; 


export default class App extends React.Component {

const {cdate，isVisible，setDate，setVisible} = this.state;

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textTitle}>REACT NATIVE RAW BOTTOMSHEET</Text>
        <View style={styles.buttonContainer}>

          <TouchableOpacity onPress={() => this.Scrollable.open()} style={styles.button}>
            <Text style={styles.buttonTitle}>SCROLLABLE</Text>
          </TouchableOpacity>     
        </View>

        {/* Grid Menu */}
        <RBSheet
          ref={ref => {
            this.Scrollable = ref;
          }}
          closeOnDragDown
          customStyles={{
            container: {
              borderTopLeftRadius: 10,
              borderTopRightRadius: 10
            }
          }}
        >
          <ScrollView>
            <View style={styles.gridContainer}>
             <DateTimePicker
  mode="time"
  isVisible={isVisible}
  cdate={cdate}
  onConfirm={cdate => {
    setDate(cdate.toTimeString());
    setVisible(false);
  }}
  onCancel={() => this.setState({ setVisible: false })}
/>
            </View>

          </ScrollView>
        </RBSheet>

      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  textTitle: {
    fontSize: 20,
    marginTop: 120
  },
  buttonContainer: {
    alignItems: "center",
    marginTop: 50
  },
  button: {
    width: 150,
    backgroundColor: "#4EB151",
    paddingVertical: 10,
    alignItems: "center",
    borderRadius: 3,
    margin: 10
  },

});

这是我遇到的错误

这就是它的工作方式

*****更新*****

我收到错误消息“ SyntaxError：\ App.js：意外令牌（21：6）

19 |导出默认类App扩展了React.Component {20 |


21 | const {cdate，isVisible，setDate，setVisible} = this.state;          | ^ 22 | 23 | render（）{24 | return（App.js：21：6“您能帮忙

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

Answer 1

尝试一下：

const { cdate, isVisible, setDate, setVisible } = this.state;

<DateTimePicker
  mode="time"
  isVisible={isVisible}
  cdate={cdate}
  onConfirm={cdate => {
    setDate(cdate.toTimeString());
    setVisible(false);
  }}
  onCancel={() => this.setState({ setVisible: false })}
/>

意外的令牌，在响应本机的onConfirm中预期

1 个答案: