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

Question

当我将 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)

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

Answer 1

看起来问题是你在它的父渲染方法中定义了你的 Dynamic ，然后直接调用父的 setState 方法(而不是通过 Prop )，这会导致你不想要的重新渲染。像这样尝试:

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