亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將 React 函數組件轉換為類組件

將 React 函數組件轉換為類組件

慕姐8265434 2023-07-14 16:27:44
我正在使用 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.請問你能幫幫我嗎 ?非常感謝 !
查看完整描述

3 回答

?
嚕嚕噠

TA貢獻1784條經驗 獲得超7個贊

State 是類組件中的實例變量,并且您的 setter 需要是一個方法。


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;


查看完整回答
反對 回復 2023-07-14
?
莫回無

TA貢獻1865條經驗 獲得超7個贊

您需要在類組件中使用狀態變量。

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;


查看完整回答
反對 回復 2023-07-14
?
臨摹微笑

TA貢獻1982條經驗 獲得超2個贊

不可能在類組件中使用“useState”、“useEffect”等 React 鉤子。盡管您可以使用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;

為什么你想使用類組件呢?有具體案例嗎?


查看完整回答
反對 回復 2023-07-14
  • 3 回答
  • 0 關注
  • 217 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號