[英]How to use datepicker in React?
這是我的基本反應代碼:
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
您正在類組件中使用“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>
);
}
}
您混合了函數和類組件樣式
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>
);
}
}
你不能在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>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.