将 React 函数组件转换为类组件

Question

我正在使用 React.js，我想在类中转换我的函数。这是我的代码：

import React, {useState} from "react";

import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

import classes from "./Datepicker.css";

const Datepicker = () => {

    const [startDate, setStartDate] = useState(new Date());

    return (

        <DatePicker className="custom-select" dateFormat="dd/MM/yyyy" selected={startDate}

                    onChange={date => setStartDate(date)}/>

    );

};

export default Datepicker;

我这样想：

class Datepicker extends Component {

    render(){

        const [startDate, setStartDate] = useState(new Date());    

        

        return (

            <DatePicker className="custom-select"    dateFormat="dd/MM/yyyy" selected={startDate}

                onChange={date => setStartDate(date)}/>

        )

    }

}

export default Datepicker;

但我得到了这个：

React Hook "useState" cannot be called in a class component.

请问你能帮帮我吗 ？

非常感谢 ！

Answer 1

State 是类组件中的实例变量，并且您的 setter 需要是一个方法。class Datepicker extends Component {&nbsp; &nbsp; constructor(props){&nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; this.state = {startDate: new Date()};&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; setStartDate = (startDate) => {&nbsp; &nbsp; &nbsp; this.setState({startDate});&nbsp; &nbsp; }&nbsp; &nbsp; render(){&nbsp; &nbsp; &nbsp; &nbsp; const {startDate} = this.state;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DatePicker&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="custom-select"&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dateFormat="dd/MM/yyyy"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selected={startDate}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.setStartDate}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}export default Datepicker;

Answer 2

您需要在类组件中使用状态变量。class Datepicker extends Component {    state = { startDate: new Date() };       setStartDate = (startDate) => {      this.setState({ startDate });    }    render(){        const { startDate } = this.state;                return (            <DatePicker className="custom-select" dateFormat="dd/MM/yyyy" selected={startDate}                onChange={this.setStartDate}/>        )    }}export default Datepicker;

Answer 3

不可能在类组件中使用“useState”、“useEffect”等 React 钩子。尽管您可以使用this.setState类组件来实现类似的东西class Datepicker extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; startDate: new Date(),&nbsp; &nbsp; }&nbsp; }&nbsp; render() {&nbsp; &nbsp; const { startDate } = this.state&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <DatePicker className="custom-select" dateFormat="dd/MM/yyyy" selected={startDate}&nbsp; &nbsp; &nbsp; &nbsp; onChange={date => this.setState({ startDate: date })} />&nbsp; &nbsp; )&nbsp; }}export default Datepicker;为什么你想使用类组件呢？有具体案例吗？