javascript - ReactJS：React-Month-Picker 错误：函数组件不能有引用。你的意思是使用 React.forwardRef() 吗？

Question

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

在基于 React-component 的屏幕月份选择器中为我工作，如下所示，

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;

在此先感谢您的时间！！

标签： javascriptreactjs

Answer 1

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

不

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

做

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

ref = {ref => pickAMonth = ref}

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