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

【问题标题】：How to use datepicker in React?如何在 React 中使用日期选择器？
【发布时间】：2020-11-16 08:37:03
【问题描述】：

这是我的基本反应代码：

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

【问题讨论】：

你在类中使用了一个钩子，这在第 21 行，最好先改变它

标签： javascript reactjs react-native datepicker

【解决方案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>
    );
  }
}

【讨论】：

【解决方案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>
    );
  }
}

【讨论】：

【解决方案3】：

你不能在 react 类组件中使用 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>
     )
    }

【讨论】：