javascript - ReactJS:TypeError:this.ref.current.method 不是函数

Question

我需要你的帮助来更好地理解 ReactJS 的引用机制。我做了一个自定义组件，我试图通过 ref 调用这个组件的方法。但是，我得到这个错误，我正在调用的不是一个函数

我的自定义组件“CountryInput”中有一个“sayHi”方法，仅在 console.log 中显示“hi”

class CountryInput extends React.Component {
  sayHi(){
    console.log('hi');
  }

  render() {
    return(
      <h1>hello</h1>
    );
  }
};

这是我在其中使用 ref 的组件:

class MyComponent extends Component {
constructor(props) {
    super(props);
    this.countryRef = React.createRef();
  }

  save(){
    this.countryRef.current.sayHi();
  }

  render() {
    const {address, classes}= this.props;
    return (
        <React.Fragment>
        <CountryInput ref={this.countryRef} />
          <Button className={classes.button} onClick={()=>this.save()}>
            Enregister
          </Button>
        </React.Fragment>
    );
  }

当我点击按钮时，我得到这个错误:

"TypeError: this.ref.current.sayHi is not a function"

我真的不明白为什么。你能帮帮我吗？

Answer 1

您的问题可能来自您正在使用的 React 库版本。

React.createRef() 在 version 16.3.0 可用。 (2018-03-29)

我得到这个答案是因为我已经测试了你的代码，在 React 版本 16.4.2 中一切正常

这是演示:https://codesandbox.io/s/jvzxmo4xky (我对你的 Button 组件做了一个假设)