-1
votes

Comment utiliser datepicker dans React?

Voici mon code de réaction de base:

import React, {Component} from 'react'
import { useState } from 'react';
import DatePicker from 'react-date-picker';

export default class TestComponent extends Component{
    constructor(props){
        super(props)
        this.state = {response: ""}
    }

    callServerApi(){
        fetch("http://localhost:9000/test")
            .then(response => response.text())
            .then(responseText => this.setState({response: responseText}))
    }

    componentWillMount(){
        this.callServerApi();
    }
    
    const [value, onChange] = useState(new Date());

    render(){
        return (
            <div>
                <p>hello from the test component</p>
                
                <form>
                  <label>
                    Select Meeting Date: <br/>
                    <input type="text" name="name" />
                  </label>
                  <input type="submit" value="Submit" />
                </form>
                
                <DatePicker
                    onChange={onChange}
                    value={value}
                />
                
                <p>{this.state.response}</p>
            </div>
            
            
            
        )
    }
}

J'essaye d'utiliser celui-ci: https://www.npmjs.com/package/react-date-picker

Mais obtenir cette erreur, je ne sais pas, comment la corriger, l'installer. Je suis très nouveau pour réagir.

SyntaxeError: D: \ src \ components \ test.component.js: jeton inattendu (21: 7

javascript reactjs react-native datepicker

1 commentaires

Vous utilisez un crochet à l'intérieur de la classe et c'est à la ligne 21, mieux vaut changer cela d'abord

3 Réponses :

3
votes

Vous utilisez le hook 'useState' dans un composant de classe, et avoir la déclaration de const à la ligne 21 génère cette erreur.

Vous pouvez utiliser l'état comme ci-dessous et définir la valeur de l'état lorsque la date est modifiée sur le sélecteur.

export default class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { response: "", value: new Date() };
  }

  callServerApi() {
    fetch("http://localhost:9000/test")
      .then((response) => response.text())
      .then((responseText) => this.setState({ response: responseText }));
  }

  componentWillMount() {
    this.callServerApi();
  }

  render() {
    return (
      <div>
        <p>hello from the test component</p>

        <form>
          <label>
            Select Meeting Date: <br />
            <input type="text" name="name" />
          </label>
          <input type="submit" value="Submit" />
        </form>

        <DatePicker
          onChange={(value) => this.setState({ value })}
          value={this.state.value}
        />

        <p>{this.state.response}</p>
      </div>
    );
  }
}

0 commentaires

3
votes

Vous avez mélangé un style de composants de fonction et de classe

import React, { Component } from 'react';
import DatePicker from 'react-date-picker';


export default class TestComponent extends Component {
  constructor(props) {
    super(props);
-    this.state = { response: '' };
+    this.state = { response: '', value:new Date() };
  }

  callServerApi() {
    fetch('http://localhost:9000/test')
      .then((response) => response.text())
      .then((responseText) => this.setState({ response: responseText }));
  }

  componentWillMount() {
    this.callServerApi();
  }
  
- const [value, onChange] = useState(new Date());
+ onChange = (value) => this.setState({value})

  render() {
    return (
      <div>
        <p>hello from the test component</p>

        <form>
          <label>
            Select Meeting Date: <br />
            <input type="text" name="name" />
          </label>
          <input type="submit" value="Submit" />
        </form>

        <DatePicker onChange={onChange} value={value} />

        <p>{this.state.response}</p>
      </div>
    );
  }
}

0 commentaires

1
votes

Vous ne pouvez pas utiliser le hook useState dans un composant de classe useState . Si vous souhaitez utiliser le hook useState , vous devez utiliser un composant fonctionnel. Ça devrait être comme ça:

import React, { useState, useEffect } from 'react';
import DatePicker from 'react-date-picker';

export default function TestComponent() {
    const [value, onChange] = useState(new Date());
    const [response, setResponse] = useState("");
    useEffect(() => {
      callServerApi();
    },[])

    const callServerApi = () => {
        fetch("http://localhost:9000/test")
            .then(response => response.text())
            .then(responseText => setResponse(responseText))
    }

    return (
       <div>
          <p>hello from the test component</p>
          <form>
             <label>
                Select Meeting Date: <br/>
                <input type="text" name="name" />
             </label>
             <input type="submit" value="Submit" />
          </form>

          <DatePicker
             onChange={onChange}
             value={value}
          />
                
          <p>{this.state.response}</p>
       </div>
     )
    }

0 commentaires