Reactjs 使用简单键盘正确处理react

我正在使用

react simple keyboard

，通过使用空字符串调用

useState

hook的setter清除输入，但不清除键盘的“内存”，因此下次键入时，您将再次添加到旧字符串中

react-simple-keyboard

（RSK）有一个

clearInput

功能来实现这个功能，而且（据我所知）必须在

keyboardRef

上调用它。所以我把它装了起来：

我的键盘组件（包装器）

export default KeyboardElement=（{onChange，keyboardRef}）=>{
返回
;
};

消费成分

导出默认许可证条目=（{onClose}）=>{
const[text，setText]=useState（“”）；
常量键盘=useRef（）；
const onClear=（）=>{
//@ts忽略
keyboard.current！.clearInput（）；
setText（“”）；
};
返回(
添加许可证
keyboard.current=r}
onChange={setText}
/>
提交
清楚的
);
};

这是可行的，但有一种代码味道：我在消费组件中创建ref（然后我将它传递给我的键盘包装器，以便RSK可以使用它，我可以调用

clearInput

），并在消费组件中使用RSK方法，而不是键盘包装器

使用键盘的组件应该使用并了解RSK的ref，这似乎是错误的。这也意味着

keyboard.current是
never
（或其他一些不可管理的类型），因此我使用
@ts ignore
作为创可贴

正确的方法是什么

更新：我已经试过了，但不起作用。我实际做的唯一更改是，我没有在内部组件（
KeyboardElement
）中使用传递的
ref
，我在
KeyboardElement
上定义了一个
clearInput
函数，它只调用其ref的
clearInput
函数。但是消费组件中的ref总是
未定义的

我认为我的情况和另一种情况的区别在于我没有调用ref的函数，我调用的是“嵌套ref”的函数。我将父对象的ref作为道具传递给子对象，以便子对象可以将其ref分配给该道具，这似乎是错误的。
我在3.1.9版中实现这一点的方法是同时导入
键盘接口

import Keyboard, { KeyboardReactInterface } from 'react-simple-keyboard'

const keyboardRef = useRef<KeyboardReactInterface | null>(null)

<Keyboard
  keyboardRef={(r) => (keyboardRef.current = r)}
  onChange={onChange}
  onKeyPress={onKeyPress}
  layoutName={layoutName}
/>

从“react simple Keyboard”导入键盘，{KeyboardReactInterface}
const keyboardRef=useRef（空）
（keyboardRef.current=r）}
onChange={onChange}
onKeyPress={onKeyPress}
layoutName={layoutName}
/>
把这篇文章读出来，你会非常生动地理解这个想法，谢谢，但这对我来说并不太管用。查看我的更新。您可以通过将hooks值设置为“”来清除该值或者使用Ref。执行其中一个，而不是两个。我希望你只清除钩子值。没有typescript或types错误。清除hooks值确实会清除组件的文本。但是，
react简单键盘
正在存储它自己的状态，以跟踪已按下的键，这意味着在清除hook值后下次键入时，您仍然保留以前按下的键。我能找到的清除键盘自身状态的唯一方法是使用其
clearInput
方法。我在链接的帖子中尝试了“使用一把钥匙”的策略，但也没用。谢谢@FranciscoHodge。事实上，我采取了另一种策略——我没有使用clear按钮调用嵌套的
键盘。clearInput
，而是将键盘作为一个更为真正受控的组件，我的
简单键盘的更改处理程序
将键入的字符传递给其父处理程序，然后
clearInput
清除键盘的缓冲区，这样键盘一次只能处理一个字符。