在函数中转换这个 [英] Convert this in function

问题描述

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import  moment  from  "moment";
import DateRangePicker from "react-native-daterange-picker";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: null,
      endDate: null,
      displayedDate: moment()
    };
  }

  setDates = dates => {
    this.setState({
      ...dates
    });
  };

  render() {
    const { startDate, endDate, displayedDate } = this.state;
    return (
      <View style={styles.container}>
        <DateRangePicker
          onChange={this.setDates}
          endDate={endDate}
          startDate={startDate}
          displayedDate={displayedDate}
          range
        >
          <Text>Click me!</Text>
        </DateRangePicker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

我尝试在 react native 中选择日期范围，但我得到的大部分代码都是类组件.请将此代码转换为函数组件.我尝试转换，但代码没有正确选择日期范围.

I have tried to make date range select in react native but most of the code I got was class component. Kindly convert this code in function component. I tried to convert but code was not selecting date range properly.

使用 npm install --save react-native-daterange-picker

use npm install --save react-native-daterange-picker

推荐答案

我认为你真的应该学习如何做到这一点.不难

You really should learn how to do this i think. it is not difficult

    import React,{useState} from "react";  // instead of  this.setState you use useState hook
    import { StyleSheet, View, Text } from "react-native";
    import  moment  from  "moment";
    import DateRangePicker from "react-native-daterange-picker";

    // export default class App extends React.Component {
    export default function App(props = {}) { 
     // no constructor
     /* constructor(props) {
        super(props);
        this.state = {
          startDate: null,
          endDate: null,
          displayedDate: moment()
        };
      }*/
      // instead useState hook, it return a variable (startDate) who contain the value like this.state.startDate before
      // and a methode (setStartDate) to change it's value like this.setState(...) before
      // order are very important, first value, then setter.
      const [startDate,setStartDate]=useState(null);
      const [endDate,setEndDate] =useState(null);
      const [displayedDate,setDisplayedDate]=useState(moment());

      const [dates,setDates]=useState(null);
      /* no need, you already have  setDates setter
      setDates = dates => {
        this.setState({
          ...dates
        });
      };
      */

      // render() {
        // const { startDate, endDate, displayedDate } = this.state;
        return (
          <View style={styles.container}>
            <DateRangePicker
              onChange={setDates}
              endDate={endDate}
              startDate={startDate}
              displayedDate={displayedDate}
              range
            >
              <Text>Click me!</Text>
            </DateRangePicker>
          </View>
        );
     // }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center"
      }
    });

这篇关于在函数中转换这个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！