Question

我正在使用HOC尝试传递一个组件并返回一个新组件，它可以工作，但是当通过TextInput时，我发现TextInput无法聚焦

我的本机版本是0.53.3

输入一个字符后就会模糊

当我在react native 0.47.2上运行代码时，甚至无法集中注意力

我使用HOC错误吗？

这是我的HOC函数

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>
       );
     }
   };

这就是我的用法

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')}
     />
   );
 };

这是onChangText函数

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

Answer 1

只需将const Enganced = addTitle(TextInput)移动到renderTitle方法之外。喜欢

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

问题在于，当在render方法中完成初始化时，每次都会创建一个新的“功能组件”。因此，TextInput不会更新，而是会重新创建（具有焦点的那个被删除，然后创建一个新的）。

同时，如果预先进行了初始化（和声明），则仅创建一个“功能组件”，您将从反应更新中受益。

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

1 个答案: