小编n80*_*n80的帖子

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

我遇到了从长页面底部运行时不再出现页面转换的问题.

这是一个jsfiddle:http://jsfiddle.net/7WVHA/7/

如果打开示例并单击黑色导航按钮,则转换将按预期运行.但是,如果您返回到长页面,请滚动到底部并再次运行它,不再发生转换,第二页就会立即显示.

任何帮助将不胜感激.

<div data-role="page" id="long">
    <div data-role="header" data-position="fixed" data-theme="a">
        <h1>Long Page</h1>
        <a href="#short" data-transition="flip" data-role="button" data-theme="b">DO TRANSITION</a>

    </div>
    <div data-role="content" data-theme="a">
        <div class="box">TEST BOX 1</div>
        <div class="box">TEST BOX 2</div>
        <div class="box">TEST BOX 3</div>
        <div class="box">TEST BOX 4</div>
        <div class="box">TEST BOX 5</div>
        <div class="box">TEST BOX 6</div>
        <div class="box">TEST BOX 7</div>        
    </div>
</div>
<div data-role="page" id="short">
    <div id="gridheader" class="header" data-role="header" data-position="fixed" data-theme="a">
        <h1>Short Page</h1>
        <a href="#long" data-transition="flip" data-role="button" data-theme="b"> Back</a>

    </div>
    <div data-role="content" data-theme="a">
        Short page
    </div> …