在React Native中使用HOC时，传递一个TextInput，并且此TextInput不能被聚焦

Question

I'm use HOC try to pass a component and return a new component, it works, but when pass a TextInput, I found the TextInput cannot be focused

My react native version is 0.53.3

and It blured after input one character

when I run the code on react native 0.47.2 ,It even not able to be focused

Am I use HOC wrong?

here is my HOC function

const addTitle = Comp =>
   class extends React.PureComponent {
     render() {
       const { title, ...childProps } = this.props;
       return (
          <View style={{ paddingHorizontal: 20 }}>
             <View style={{ flexDirection: 'row', marginVertical: 5 }}>
             <Text style={styles.subText}>{title}</Text>
             <Text style={[styles.subText, { color: 'red' }]}>{'*'}</Text>  
             </View>
             <Comp {...childProps} />
          </View>
       );
     }
   };

this is how I use it

renderTitle = () => {
   const { title } = this.state;
   const Enhanced = addTitle(TextInput);
   return (
     <Enhanced
       autoCorrect={false}
       autoCapitalize={'none'}
       style={styles.textInput}
       title={'title'}
       value={title}
       onChangeText={this._onChangeText('title')}
     />
   );
 };

this is the onChangText function

_onChangeText = attribute => value => {
   this.setState({
     [attribute]: value,
   });
};

Answer 1

Just move const Enganced = addTitle(TextInput) outside of the renderTitle method. Like

 const Enganced = addTitle(TextInput); class SomeComponent extends React.Component { // code } 

The problem is that, when the initialization is done within the render method, a new "function component" is created every time. Therefore TextInput is not updated, but is re-created (the one with the focus is removed, and a new one is created).

Meanwhile, if the initialization (and declaration) is done in advance, only one "function component" is created and you get the benefit of react updating.