javascript - 如何在 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

标签： javascriptreactjsreact-nativedatepicker

Answer 1

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

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