React native 焦点不是一个函数

React native 焦点不是一个函数,react-native,React Native,在旧的react本机版本中,以下代码用于工作。但是现在在v0.45.1中,我得到了一个错误,SecondInput.focus不是一个函数 <TextInput style = {styles.titleInput} returnKeyType = {"next"} autoFocus = {true} placeholder = "Title" onSubmitEditing={(event) => {

在旧的react本机版本中,以下代码用于工作。但是现在在
v0.45.1
中,我得到了一个错误,
SecondInput.focus
不是一个函数

 <TextInput 
      style = {styles.titleInput}
      returnKeyType = {"next"}
      autoFocus = {true}
      placeholder = "Title"
      onSubmitEditing={(event) => { 
        this.refs.SecondInput.focus(); 
      }}
    />
    <TextInput
      ref='SecondInput'
      style = {styles.descriptionInput}          
      multiline = {true}
      maxLength = {200}
      placeholder = "Description" />
{
this.refs.SecondInput.focus();
}}
/>

更新:问题似乎是Redux表单。

尝试ref的最新回拨模式,并检查其是否工作

类内组件

<TextInput 
  style = {styles.titleInput}
  returnKeyType = {"next"}
  autoFocus = {true}
  placeholder = "Title"
  onSubmitEditing={(event) => { 
    this.secondInput.focus(); 
  }}
/>
<TextInput
  ref={secondInput => this.secondInput = secondInput}
  style = {styles.descriptionInput}          
  multiline = {true}
  maxLength = {200}
  placeholder = "Description" 
/>
{
this.secondInput.focus();
}}
/>
this.secondInput=secondInput}
style={style.descriptionInput}
多行={true}
maxLength={200}
占位符=“说明”
/>
在functional components中,而不是this.secondInput,只需声明变量secondInput并在任何地方使用,而不使用“this”


希望这能奏效…

以下是关注文本框的示例

           class CustomTextInput extends React.Component {
              constructor(props) {
                super(props);
                this.focus = this.focus.bind(this);
              }

              focus() {
                // Explicitly focus the text input using the raw DOM API
                this.textInput.focus();
              }

              render() {
                // Use the `ref` callback to store a reference to the text input DOM
                // element in an instance field (for example, this.textInput).
                return (
                  <div>
                    <h1>Click for focus</h1>
                    <hr />
                    <div>
                    React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

                    When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument. For example, this code uses the ref callback to store a reference to a DOM node:
                    </div>
                    <br/>
                    <input type="text" value="no focus" className="form-control"/>
                    <br/>
                    <input
                      type="text"
                      ref={(input) => { this.textInput = input; }} className="form-control"/>
                      <br/>
                    <input
                      type="button"
                      value="Focus the text input"
                      onClick={this.focus}
                      className="btn btn-sm btn-primary"
                    />
                  </div>
                );
              }
            }

            export default CustomTextInput
类CustomTextInput扩展React.Component{
建造师(道具){
超级(道具);
this.focus=this.focus.bind(this);
}
焦点(){
//使用原始domapi显式聚焦文本输入
this.textInput.focus();
}
render(){
//使用'ref'回调存储对文本输入DOM的引用
//实例字段中的元素(例如,this.textInput)。
返回(
点击查看焦点

React支持可以附加到任何组件的特殊属性。ref属性采用回调函数,并且在安装或卸载组件后将立即执行回调。 在HTML元素上使用ref属性时,ref回调将接收底层DOM元素作为其参数。例如,此代码使用ref回调存储对DOM节点的引用:

{this.textInput=input;}}className=“表单控件”/>
); } } 导出默认CustomTextInput
这是因为你应该使用状态来操纵你的应用程序,而不是refs。看看这个,他还向你展示了如何专注地操作它。@这个问题的答案已经不起作用了。因为focus不是TextInputI上的一个函数,所以它不是公认的答案,而是第二个答案。他解决了这个问题。我得到一个错误,未定义不是一个函数,正在评估secondInput.focus()。这似乎是Redux表单的问题,我将更新这个问题。哦,Redux,我不使用它。问题涉及React-Native,而不是React。这里使用的方法似乎与之前发布的答案相同。