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

状态是类组件中的实例变量，而您的设置方法必须是方法。

class Datepicker extends Component {
    constructor(props){
      super(props);
      this.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 2

您需要在类组件中使用状态变量。您可以阅读有关组件状态here

的更多信息

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”等的反应挂钩。尽管您可以使用this.setState来实现与类组件类似的功能

class Datepicker extends Component {
  constructor(props) {
    this.state = {
      startDate: new Date(),
    }
  }

  render() {
    const { startDate } = this.state

    return (
      <DatePicker className="custom-select" dateFormat="dd/MM/yyyy" selected={startDate}
        onChange={date => this.setState({ startDate: date })} />
    )
  }
}

export default Datepicker;

为什么您要使用类组件？有具体情况吗？

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

3 个答案: