Reactjs .如何使用ref清除react native中的自定义输入

我正在开发一个应用程序，用户将连续输入大量记录。目前，我正在使用

State

在按下submit时清除输入。因此，考虑到性能问题，我想使用

ref

属性清除输入。所以我试着用这些

1- firstref.current.clear();
2- firstref.current.setNativeProps({ text: '' });
3- firstref.current.value = '';

但输入字段在提交后未清除值。我正在使用一个自定义输入组件。下面是一个使用状态清除输入的演示

{setDigit（{value:text，错误：“”}）；if（text.length==3）{ref.current.focus（）；}}
错误={！！位。错误}
errorText={digit.error}
keyboardType=“数字”
maxLength={3}
minLength={3}/>
setCount（{value:text，错误：“”}）
错误={！！count.error}
errorText={count.error}
keyboardType=“数字”
maxLength={3}/>
提交

您应该使用“React.createRef”而不是“React.useRef”

然后

---

将工作

您想要的是在更改ref后使react重新启动，这是不可能的

如果要在ref更改后触发重新渲染，则必须使用useState而不是useRef。只有这样才能确保组件将重新渲染

如中所述

请记住，useRef的内容更改时不会通知您。更改.current属性不会导致重新渲染。如果您想在React将ref附加或分离到DOM节点时运行一些代码，则可能需要使用回调ref

---

看起来这是react native paper package的TextInput中的一个错误

此外，这一行：

scrollViewRef.current.scrollToEnd({animated: true})

给我一个错误：

无法读取未定义的属性“scrollToEnd”

我评论这篇文章是想看看参考文献发生了什么

首先，您无法使用ref（尚未）获取TextInput的值

我继续修改代码，我注意到

digitRef.current.focus();

这一行是聚焦，也给文本输入上一个文本

您可以通过在focus和clear之间添加setTimeout来查看发生了什么

解决方法是使用文本输入“react native”而不是“react native paper”

以下是工作代码：

---

也许您可以进一步解释为什么在这种情况下，

createRef

比

useRef

更合适？@D10S我已经尝试过了，但仍然存在同样的问题。没有从输入中清除值。我在小吃上检查了它。它起作用了。您还可以添加

（{value:''}）。请注意，在函数返回之前需要调用这两行。@D10S是的，我已经按照您在这里提到的那样尝试过了，但是它显示了一个类似于未处理拒绝（TypeError）的错误：firstref.current为null。这就是我在axios.post语句中实现您的问题的方式。你不能像以前那样用“then”。尝试将代码切换为async wait，因为submit函数已经声明为async。我在这里用工作示例回答了这个问题：，哦，等等，你是同一个人@b3hr4d我已经尝试了你建议我做的减少不必要渲染的方法。但在实施之后，我的问题也没有完全解决。所以我回到原来的那个，把我的组件分为父组件和子组件。这解决了我的问题，但现在我只是想减少国家电话的数量。这就是为什么我选择了ref方法。
firstref.current.clear();

scrollViewRef.current.scrollToEnd({animated: true})

digitRef.current.focus();