我需要访问 InputGroup BlueprintJs react 组件中的输入

Posted 2023-02-22

【中文标题】我需要访问 InputGroup BlueprintJs react 组件中的输入

【英文标题】：I need to access to input inside InputGroup BlueprintJs react component

【发布时间】：2018-03-14 14:29:22

【问题描述】：

BluePrintJS React InputGroup 组件非常适合现代用户界面。但不幸的是，React 组件不允许访问里面的 元素。

我需要访问输入元素有两个主要原因：

如果我的表单中有 50 个 InputGroup，我不想编写 50 个 OnChange() 回调。当用户完成所有输入时，我想获取所有 InputGroup.value()，这是不可能的（由于 htmlInputElement.value 可以使用常规输入元素，但 InputGroup 不允许访问内部输入）

在显示表单时，我需要关注第一个字段。 InputGroup 没有函数 focus()，而 HTMLInputElement 有一个。

简而言之，InputGroup 中缺少 2 个函数：GetValue() 和 Focus()，我看不出它们为什么会丢失。 任何建议将不胜感激。 非常感谢。

【参考方案1】：

略有不同的变化，但这也有效：

inputRef:(input:HTMLInputElement | null) => 
    // your code here
    return input;

请注意，代码在您仅渲染组件时运行，具体取决于您的使用情况，对我来说，当我单击选择上的子控件时会发生这种情况。

在我的例子中，我只是想修改一个适用于选择文本搜索的输入。

【参考方案2】：

我找到了获取输入的方法！与：

inputRef=(input:HTMLInputElement) => 
    this.logininput=input;

（第一次没看到）。

现在我有了输入对象，我可以在“didmount”上设置焦点，我可以通过 logininput.value 获取值。

谢谢

【讨论】：

我希望在新版本的 blueprintjs 中，所有的表单元素都有这个功能（即访问对象及其数据不发生变化事件），尤其是 datepickers 和 timepicker 时我遇到了问题