Question

当我将TextInput移动到自定义JSX组件中时，只要我修改文本就会失去焦点。

在下面的示例中，在render（）中也创建了几乎相同的TextInput，而不使用组件标记，并且它不会失去焦点。

我已经阅读了关键属性以及如果未指定或不唯一，焦点可能会丢失的方式。但是，在下面的简单示例中，键属性是唯一的。

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方法（而不是通过道具），这会导致重新渲染你不想要的。试试这样：

导入React，{Component}来自＆＃34;反应＆＃34 ;; 从＆＃34; react-native＆＃34;;

导入{AppRegistry，Text，View，TextInput}

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

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

1 个答案: