我试图使用React参考来聚焦Redux-Form字段,当它安装时。
当我尝试this.refs.title.getRenderedComponent()。焦点()
在组件的
,一个错误抛出说:
edit_fund.js:77未捕获的类型错误:无法读取未定义的属性'getRenderedComponent'
当我安慰的时候。记录这个。refs,它主要是一个空对象,有时将“title”标识为ref,但它不可靠。
我是否错误地使用了refs?下面是我的代码供参考。
componentDidMount = () => {
this.refs.title
.getRenderedComponent()
.focus();
}
...
<Field
id="title"
name="title"
component={FormInput}
type="text"
ref="title" withRef
/>
我使用redux表单和材质UI,必须执行以下操作MaterialCheckboxField
和MaterialTextField
是我的项目包装中的自定义组件materialui/{Checkbox,TextField}
。
我将MaterialTextField
转换为类组件(如React文档中所规定)。
不能在函数组件上使用ref
属性,因为它们没有实例。
import { findDOMNode } from "react-dom";
字段设置焦点(在render()方法中):
<Field
component={MaterialCheckboxField}
label="Checkbox"
name="..."
onClick={event => {
if (!event.target.checked) return;
// focus() field after grace period
// oddity of Material UI, does not work without
window.setTimeout(() => this.textField.focus(), 150);
}}
/>
物料UI特定的
建议使用此SO问题中的setTimeout()
允许宽限期。考虑卢卡斯的评论:
“此代码可能会抛出。更好的方法是将
setTimeout()
返回的ID保存到组件,并在componentWillUnmount()上检查超时是否仍然存在,如果存在则清除它”
将接收焦点的字段(在
render()方法中):
<Field
component={MaterialTextField}
label="Text field"
name="..."
ref={ref => {
const node = findDOMNode(ref);
if (node) {
// Material UI wraps input element,
// use querySelector() to obtain reference to it
// if not using MUI, querySelector() likely not needed
this.textField = node.querySelector("input");
}
}}
withRef
/>
注意
我使用的是材料界面0。x
,不确定这是否是反应的原因。CreateRef()
对我不起作用(自React 16.3以来推荐的方法)。
请尝试使用回调函数设置ref:
ref={(input) => { this.title = input; }}
然后使用它来获取底层DOM节点:
ReactDOM.findDOMNode(this.title).focus();
如果DOM输入元素包装在另一个元素中,则为:
ReactDOM.findDOMNode(this.title).getElementsByTagName("input")[0].focus()
根据React,使用带有字符串的引用的文档存在一些问题。请查看文档以了解更多详细信息。
问题内容: 我正在尝试使用React refs在安装时聚焦Redux-Form字段。 当我尝试时,会抛出一个错误: 当我console.log this.refs时,它通常是一个空对象,有时将’title’标识为ref,但它不是可靠的。 我是否正确使用了引用?我的代码在下面供参考。 … 问题答案: 请尝试使用回调函数设置ref: 然后使用它来获取基础的DOM节点: DOM输入元素是否包装在另一个元
问题内容: 我正在编写一个小型游戏,其中一个JFrame负责主游戏,另一个JFrame负责显示得分。问题是,当我完成构建它们时,分数JFrame总是最终集中精力!我试过调用scoreDisplay.toFront(),scoreDisplay.requestFocus(),甚至: 有什么办法可以使这项工作吗?预先感谢,约翰·穆拉诺 问题答案: 您是否考虑过将得分设置在与游戏框架相同的框架中? 其他
我正在阅读来自Reactjs的React文档。但它似乎不是为我想做的事情而工作。 我想渲染一个有嵌套div的组件。单击每个嵌套div后,它会变成一个输入。在特定div之外单击后,它将输入转换回div。 我想使用带有模糊/焦点的参考文件来实现这一点,但我似乎不知道如何让它工作。 这就是我的组件到目前为止的样子,它是一个子组件: 查看react提供的示例代码。js。org,我想知道为什么没有onFoc
问题内容: 我需要将注意力集中在指定的窗口上,而我头上看到的唯一方法是将其前面的所有窗口最小化,直到找到正确的窗口为止。 我该怎么做? Windows 7,没有特定的工具包…。 每种类型的窗口,例如,firefox和控制台命令 问题答案: 您需要通过窗口枚举并匹配窗口标题才能获得所需的窗口。下面的代码搜索标题为“ firefox”的窗口并设置焦点: 为了最小化窗口,下面的行:
我使用材质UI文本字段 我想实现一个自动对焦,我找不到一种方法通过设置而不是通过编程来实现。有什么帮助吗?
我有一个样式化的组件: 当安装使用它的组件时,我想