我需要你帮忙更好地理解ReactJS中的引用机制。我创建了一个自定义组件,并尝试通过ref调用该组件的方法。但是,我得到一个错误,说我调用的不是一个函数。
在我的自定义组件"CountryInput"中,我有一个"sayHi"方法,仅通过console.log显示"hi"。
在我的自定义组件"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不是一个函数"
我真的不明白为什么会出现这个错误。你能帮我吗?
this.ref
,而在您的代码中是this.countryRef
。您已经修复了代码但正在测试旧版本吗? - Daniel HilgarthcreateRef()
的旧版React,在16版本中它可以正常工作。https://codesandbox.io/s/m7v7nvrwly - 需要16.3+,但是它应该会抱怨React.createRef()
不是一个函数... - Dimitar ChristoffcountryRef.current
- 我怀疑这不是你实际运行的代码,可能有一个高阶组件包装了CountryInput。 - Dimitar Christoff