React Native TextInput 在 JSX 组件中失去焦点

Posted 2023-02-21

【中文标题】React Native TextInput 在 JSX 组件中失去焦点

【英文标题】：React Native TextInput loses focus in JSX component

【发布时间】：2018-08-07 01:03:36

【问题描述】：

当我将 TextInput 移动到自定义 JSX 组件中时，它会在我修改文本时立即失去焦点。

在下面的示例中，在 render() 中也创建了几乎相同的 TextInput，但没有使用组件标签，并且它不会失去焦点。

我已经阅读了关于 key 属性的内容，以及如果没有指定或者不是唯一的，焦点是如何丢失的。但是，在下面的简单示例中，关键属性是唯一的。

import React,  Component  from 'react'
import 
  AppRegistry,
  Text,
  View,
  TextInput,
 from 'react-native'

class App extends Component 

    constructor(props) 
      super(props);

      this.state =  
          text: "111"          
      ;

    

  render() 

    var t = this;

    function Dynamic(props) 

      var text = props.text;

      return  <TextInput key="textinput1" style=width:"100%", padding:10, 
            borderWidth:1, marginTop:20, marginBottom:20
            onChangeText=(text) =>  t.setState(text)                                  
            value=text
            />

    

    return (
      <View >        
        <Text>DYNAMIC COMPOMENT - LOSES FOCUS</Text>        
        <Dynamic key="dynamickey" text=this.state.text></Dynamic>         

        <Text>NOT DYNAMIC - KEEPS FOCUS</Text>
        <TextInput key="textinput2" style=width:"100%", padding:10, 
            borderWidth:1, marginTop:20, marginBottom:20
            onChangeText=(text) =>  t.setState(text)                               
            value=this.state.text
            />                
      </View>
    )
 


AppRegistry.registerComponent('App', () => App)

任何关于这里发生的事情或如何处理它的意见将不胜感激。

【问题讨论】：

您的 return 语句在 render 方法中不完整。请使用您拥有的确切代码完成它。

【参考方案1】：

看起来问题是你在它的父渲染方法中定义你的 Dynamic 然后直接调用父的 setState 方法（而不是通过道具），这会导致你不想要的重新渲染。试试这样：

import React,  Component  from "react";
import  AppRegistry, Text, View, TextInput  from "react-native";

class App extends Component 
  constructor(props) 
    super(props);

    this.state = 
      text: "111"
    ;
  

  render() 
    var t = this;

    return (
      <View>
        <Text>DYNAMIC COMPOMENT - LOSES FOCUS</Text>
        <Dynamic
          key="dynamickey"
          text=this.state.text
          changeText=text => this.setState( text )
        />

        <Text>NOT DYNAMIC - KEEPS FOCUS</Text>
        <TextInput
          key="textinput2"
          style=
            width: "100%",
            padding: 10,
            borderWidth: 1,
            marginTop: 20,
            marginBottom: 20
          
          onChangeText=text => 
            t.setState( text );
          
          value=this.state.text
        />
      </View>
    );
  

const Dynamic = ( text, changeText ) => 
  return (
    <TextInput
      key="textinput1"
      style=
        width: "100%",
        padding: 10,
        borderWidth: 1,
        marginTop: 20,
        marginBottom: 20
      
      onChangeText=changeText
      value=text
    />
  );
;

AppRegistry.registerComponent("App", () => App);

这是一个工作示例：https://snack.expo.io/BJ-SARfdM