英文:
React Native - ref's depreciation message
问题
以下是已翻译的内容：
我正在使用一个签名捕获组件（https://github.com/RepairShopr/react-native-signature-capture）作为表单的一部分。我希望在提交表单时通过重置函数（下面的ClearDutyRecord）重置表单字段，并且需要在此过程中重置签名捕获组件。
组件文档（https://github.com/RepairShopr/react-native-signature-capture）描述了一个重置函数，这非常理想 - 但调用该函数的方法（使用refs）已被弃用。在Stack Overflow上查找，我找到了这篇帖子，解释了这个问题 - https://stackoverflow.com/questions/43873511/deprecation-warning-using-this-refs - 但我不确定如何在RN中实现它 - 或者是否有不同的方法我现在应该采取 - 是否有人可以提供任何建议吗？
这是我目前的重置代码：
clearDutyRecord = () => {
this.setState({
dutyRecordViewId: 'home',
comments:'',
signatureName:'',
});
this.refs["drSig"].resetImage();
this.props.navigation.navigate('HomeViewContainer');
}
希望这对你有帮助。
英文:
I am using a signature capture component (https://github.com/RepairShopr/react-native-signature-capture) as part of a form. I want to reset the form fields on submission via a reset function (ClearDutyRecord below) and need to reset the signature capture also as part of this process.
The component documentation (https://github.com/RepairShopr/react-native-signature-capture) describes a reset function, which is ideal - but the method to call the function (using refs) is depreciated. Looking around Stack Overflow I've found this post which explains the issue - https://stackoverflow.com/questions/43873511/deprecation-warning-using-this-refs - but I'm unsure how to implement in RN - or whether there is a different approach I should now take - can anyhow offer any advice please?
This is my reset code currently:
clearDutyRecord = () => {
this.setState({
dutyRecordViewId: 'home',
comments:'',
signatureName:'',
});
this.refs["drSig"].resetImage();
this.props.navigation.navigate('HomeViewContainer');
}
答案1
得分: 1
由于这是一个类组件，您可以使用React.createRef()解决方案 - 这是类组件的最新方法。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
来源：reactjs文档
React Native确实在内部使用了React.js，因此无需担心在Native环境中使用React - 这与在浏览器环境中使用的React相同（浏览器环境的特性封装在react-dom包中）。
英文:
Since it's a class component, You can use the React.createRef() solution - that is the most up-to-date way for class components.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
source: reactjs docs
React Native does use React.js inside, so don't worry about using the React in the Native environment - this is the same React (the stuff characteristic for browser-enviromnets are encapsulated in react-dom package).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论