Преобразуйте это в функцию

Question

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, но большая часть кода, который я получил, была компонентом класса. Пожалуйста, преобразуйте этот код в функциональный компонент. Я пытался преобразовать, но код не выбирал диапазон дат должным образом.

используйте npm install --save react-native-daterange-picker

Answer 1

Думаю, тебе действительно стоит научиться это делать. это не сложно

    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"
      }
    });