如何通过refs聚焦React中的输入

文章/答案/技术大牛

发布

1回答

javascript、reactjs、input、react-ref

我正在使用React JS，并且遇到了一个问题。我在页面上有一个组件，其中有一些inputs。当用户单击任何input时，应该在下面创建一个新的块，并且必须同时关注相同的input。<ViewModule textInput={textInput}/> : null; 之后我得到了×TypeError:无法读取null的属性'focus‘ 下面是我的主要组件，页面上的所有内容都发生在这里>Cancel</Btn>

浏览 21提问于2021-09-05得票数 0

回答已采纳

3回答

ReactJS:如何访问子组件的ref？

coffeescript、reactjs

{ div, input } = React.DOM render: -> Inner() render: ->我在我的外部类上有一个toggle方法，它是通过按快捷键触

浏览 2提问于2014-06-21得票数 22

回答已采纳

3回答

无法在IE11中使用JavaScript聚焦输入

javascript、internet-explorer、reactjs、react-jsx

在将输入元素插入到DOM之后，我无法让IE11对其进行聚焦。元素在被聚焦后不会接收文本输入，但是它的占位符文本不再可见。该元素是由React创建的，我在componentDidMount中通过React的refs对象访问它 this.refs.input.getDOMNode().focus(), 10);

浏览 0提问于2015-08-12得票数 7

回答已采纳

1回答

焦点不适用于React本机TextInput

reactjs、react-native

我有一个多行文本输入，我想在onComponentDidMount函数中关注它。如果我只是将autoFocus属性设置为'true‘，那么一切都会正常工作。但是如果我想通过this.refs.myRefName.focus()手动聚焦，我会得到一个错误，告诉我这不是一个函数。但是，我以前在React Native中使用过它，达到了预期的效果(我目前使用的是v0.36.0)。那么，现在如何手动聚焦文本

浏览 2提问于2016-10-27得票数 0

1回答

如何自动将焦点更改为下一个TextInput？

react-native

我想做一个银行卡号码输入功能。这里的想法是，当用户完成一个输入框时，它将自动集中在下一个输入框上。就像以前的照片： TextInput component(AutoTextInput):import { StyleSheet, TextInput, View } from 'react-native' import colors from '

浏览 0提问于2021-04-12得票数 0

1回答

如何模糊语义用户界面反应中提供的输入？

javascript、reactjs、semantic-ui-react

当我坐在输入组件中时，我希望当我按下downKey键时，输入是非聚焦/模糊的。这是我的输入组件 focus={this.state.inputFocus} placeholder='Search...' /> 在进入<e

浏览 0提问于2018-02-24得票数 6

回答已采纳

2回答

当最大长度为第一个输入时，在react* js中将焦点从一个输入移动到另一个输入*

reactjs、react-router

当第一个输入的最大长度已满时，将焦点从一个输入移动到react js中的其他输入。

浏览 0提问于2019-08-18得票数 1

1回答

如何在componentDidMount中设置按钮焦点

reactjs

我尝试在componentDidUpdate中设置它，它可以工作，但在第一次渲染obv时不起作用。我是不是做错了什么？感谢你的帮助

浏览 19提问于2021-07-30得票数 0

回答已采纳

3回答

在function中选择function中的元素作为无状态函数组件？

reactjs

style={styles.textField} fullWidth={true}我试图在无状态函数组件中提供一个输入字段，以便在组件加载如下所示时能够聚焦它： console.log('test') }Stateless fu

浏览 0提问于2018-05-10得票数 1

回答已采纳

3回答

使用参考文献聚焦输入

javascript、reactjs

我试着用refs是ReactJ，通过点击按钮来聚焦文本框。focus' of undefinedclass FocusText extends Component{ this.refs.myTextInput.focusonClick={this.handleClick.bind(this)}/> );

浏览 5提问于2017-07-16得票数 2

回答已采纳

1回答

使用refs生成并聚焦到平面列表中的特定文本输入

javascript、reactjs、react-native

我在react原生组件中呈现了一个包含多个文本输入和一个图标元素的平面列表。我想要实现的是点击任何编辑图标，我需要聚焦相应的文本输入。从过去的经验来看，我知道使用refs我们可以做到这一点。但是，如何根据索引或任何其他值生成动态ref，并将焦点放在相应的文本输入上？"pencil" &#x

浏览 8提问于2021-01-29得票数 0

回答已采纳

4回答

如何在不使用状态的情况下清除功能组件中输入字段的值？

reactjs、material-ui、react-functional-component

我有一个输入字段，我通过onKeyUp处理输入(因为我需要访问event.which)。这很好，因为我只是通过event.target.value获取输入的内容，但是当我试图重置输入字段的值时，我遇到了一些问题。我使用的是功能组件，因此不可能通过refs访问输入，我在useRef中找到的所有示例都只是展示了如何聚焦输入<

浏览 4提问于2019-10-20得票数 4

回答已采纳

2回答

一旦达到最大长度值，就关注下一个输入- reactjs

javascript、reactjs

以下是我的输入： <input onChange={(event)=>this.setState({cardNumber4:event.target.value})} name="card4" typeimportant;'}} required="" autocomplete="off" tabindex="1" maxlength="4" /> 现在，我想要在填充的第一个输入之后进

浏览 40提问于2019-04-14得票数 0

2回答

在FlatList中响应本机焦点输入

javascript、react-native

我正在根据服务器的数据呈现一个动态列表。如果onSubmitEditing事件被触发，那么FlatList中的下一个组件应该是聚焦的。我试着使用refs来聚焦动态表单，但是它不合适(下一个输入是没有焦点)。若要标识FlatList中的项，请使用索引。index} () => { let reference = 'article&#

浏览 0提问于2019-02-11得票数 0

1回答

React如何使用refs来聚焦/模糊？

javascript、html、reactjs

我正在阅读来自Reactjs.org的React文档，但它似乎无法完成我想要做的事情。我想使用模糊/聚焦的refs来实现这一点，但我似乎想不出如何让它工作。这是我的组件到目前为止的样子，它是一个子组件： constructo

浏览 5提问于2021-03-17得票数 1

2回答

React Native - onClick文本标签不起作用时的TextInput焦点

javascript、react-native、focus、textinput、ref

我只是想让textinput focus更容易为用户友好的应用程序。我试着在用户错过的时候点击文本输入，然后点击文本，而不是把焦点放在文本输入上。因此，我将ref添加到文本中在TextInput上它适用于1个单词的标签文本，但不适用于长文本。它还说<em

浏览 4提问于2021-06-10得票数 0

1回答

在ReactJS中如何将按钮的焦点放在单击上

javascript、reactjs

我有以下问题，在我用nextJS和ReactJS构建的网站中，当点击一个按钮时，我有加载的产品，当我点击按钮时，项目出现，按钮向下滚动，这是被要求的行为，但当我滚动到页面底部，我试图点击按钮时，滚动保持在相同的位置这样，它就不会停留在底部，而是会自动向上滚动到按钮，并看到加载的新项目。问题是，加载产品的逻辑是在一个不同的组件中，在这个组件中，我重用了当前的按钮和右道具，并将函数发送到按钮上

浏览 17提问于2021-03-26得票数 0

1回答

React Native + Redux表单-在maxLength上转到下一字段

javascript、react-native、redux、react-redux、redux-form

你好，我想做4个pin代码的输入，一切都很好，只是我想添加功能，所以当我们在Field1中编写numer时，它将我们带到Field2等。这是我的代码： InputComponent = ({ input, meta, ...rest }) => ( <Input {...rest} keyboardType="numeric

浏览 0提问于2018-06-04得票数 1

2回答

如何使用React* refs来聚焦Redux表单域？*

javascript、reactjs、redux-form、react-redux-form

当Redux-Form字段挂载时，我尝试使用React refs来聚焦它。当我在componentDidMount中尝试this.refs.title.getRenderedComponent().focus()时，抛出一个错误，指出： edit_fund.js:77 Uncaught，有时会将'title‘标识为引用，但它是不可靠的。我是不是错误地使用了refs？我的代码如下以供参考。componentDidMount = () =>

浏览 1提问于2017-02-26得票数 8

回答已采纳

4回答

使用React更改文本区域中的光标位置

javascript、jquery、reactjs

我有一个文本区域的反应，我想变成一个“记事本”。这意味着我希望“选项卡”键缩进而不是偏离焦点。我看了，但我无法让它与反应一起工作。这是我的代码： if (event.keyCode === 9) { // tab was pressed this.refs.input.selectionStar

浏览 11提问于2016-07-14得票数 35

回答已采纳

点击加载更多