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

【问题标题】：React Native TextInput loses focus in JSX componentReact Native TextInput 在 JSX 组件中失去焦点
【发布时间】：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 方法中不完整。请使用您拥有的确切代码完成它。

标签： react-native jsx

【解决方案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

【讨论】：