如何在 React 中使用日期选择器？

Question

这是我的基本反应代码：

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

我正在尝试使用这个： https : //www.npmjs.com/package/react-date-picker

但是得到这个错误，不知道，如何正确安装它。 我很新来反应。

SyntaxError: D:\\src\\components\\test.component.js: Unexpected token (21:7

Answer 1

您正在类组件中使用“useState”钩子，并且在第 21 行声明 const 会引发此错误。

您可以使用如下所示的状态，并在选择器上更改日期时设置状态值。

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

Answer 2

您混合了函数和类组件样式

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

Answer 3

你不能在useState类组件中使用useState钩子。 如果您想使用useState钩子，那么您应该使用功能组件。 应该是这样的：

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