ReactJS：React-Month-Picker错误：功能组件不能具有引用。您是要使用React.forwardRef（）吗？

Posted 2021-05-04

我使用"react": "^16.12.0"版本，我制作了2个单独的屏幕，一个屏幕基于React组件，另一个屏幕基于功能。

如下所示，在基于React组件的屏幕月份选择器为我工作时，

import React, { Component } from 'react';
import {Button} from 'react-bootstrap';
import Picker from 'react-month-picker';
import 'react-month-picker/css/month-picker.css';
import MonthBox from './MonthPicker';

class OldScreen extends Component{
state = { 
    Durtn: "",
    monthValue: {year: new Date().getFullYear(), month: (new Date().getMonth())},
    FormatedMonth:"",
  }
  selectDuration(){
  console.log("Generate")  
  // this.setState({Durtn: "Dur"});
  }      
  handleClickMonthBox(e) {
    this.refs.pickAMonth.show()
  }
  handleAMonthChange(year, month) {
    let Dur = {year: year, month:month}
    this.setState( {monthValue: Dur} )
  }
  handleAMonthDissmis(value) {
      this.setState( {monthValue: value} )
  }

  render(){

      const pickerLang = {
        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      }
        ,mvalue = this.state.monthValue
      let makeText = m => {
          if (m && m.year && m.month) return (pickerLang.months[m.month-1] + '. ' + m.year)
          return '?'
      }

      return(
        <div style={{ padding:15}}>
        <form>
        <div className="form-row" style={{ paddingTop:20}}>
            <div className="edit" style={{width:100,paddingLeft:10}}>
                <Picker
                    ref="pickAMonth"
                    years={[2016, 2017, 2018, 2019, 2020, 2021,2022]}
                    value={mvalue}
                    lang={pickerLang.months}
                    onChange={this.handleAMonthChange.bind(this)}
                    onDismiss={this.handleAMonthDissmis.bind(this)}
                >
                    <MonthBox value={makeText(mvalue)} onClick={this.handleClickMonthBox.bind(this)} />
                </Picker>
              </div>
          </div>
        </form>
     </div>
      )
  }

}
export default OldScreen;

然后，我尝试使用基于React函数的同一屏幕，但出现此错误，

Error: Function components cannot have refs. Did you mean to use React.forwardRef()?

要解决此尝试问题，1.因为我使用的是16.12.0，所以我添加了import React, { useState, useRef } from 'react';，但是在添加之后，我也遇到了错误TypeError: pickAMonth.show is not a function

下面的错误程序，

import React, { useState, useRef } from 'react';

import Picker from 'react-month-picker';
import 'react-month-picker/css/month-picker.css';
import MonthBox from './MonthPicker';




function NewScreen() {
    const pickAMonth = useRef(null);

    const pickerLang = {months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
    const mvalue ={year: new Date().getFullYear(), month: (new Date().getMonth())}
      let makeText = m => {if (m && m.year && m.month) return (pickerLang.months[m.month-1] + '. ' + m.year)
                           return '?'}

const handleAMonthChange=(e)=> {
  }
const handleAMonthDissmis=(e)=> {
}
const handleClickMonthBox=(e)=> {
    pickAMonth.show()
  }

    return (
        <div style={{ padding:15}}>
            <form>

            <div className="form-row" style={{ paddingTop:20}}>
                <div className="edit" style={{width:100,paddingLeft:10}}>
                <Picker
                    ref={pickAMonth}
                    years={[2016, 2017, 2018, 2019, 2020, 2021,2022]}
                    value={mvalue}
                    lang={pickerLang.months}
                    onChange={handleAMonthChange}
                    onDismiss={handleAMonthDissmis}
                >
                    <MonthBox value={makeText(mvalue)} onClick={handleClickMonthBox} />
                </Picker>
            </div>
            </div>
            </form>
        </div>
    );
}

export default NewScreen;

提前感谢您的时间！

答案

在功能组件中ref在'current'属性中具有其值

const handleClickMonthBox=(e)=> {
    pickAMonth.**current**.show()
}

另一答案

要在反应中使用ref，您需要将回调传递给组件中的ref

dont

ref="pickAMonth"
// or
 ref={pickAMonth}

do

ref = {(componentRef) => refVariable = componentRef
}

ref = {ref => pickAMonth = ref}

// somwhere in your code, now you can do this
pickAMonth.show();