在自定义组件内调用 useState Hook 时反应 Native TextInput ReRenders

Question

描述当 TextInput 组件触发 onChangeText 或 onKeyPress 方法然后触发 setState 时，组件将重新渲染并失去焦点。

React Native 版本： 0.62（使用Expo无法升级）

重现步骤 请提供重现该问题的详细步骤列表。

创建一个像
声明useStateHook
通过直接 JSX 或自定义组件将 TextInput 传递给包装器组件
将 setState 函数绑定到 TextInput 的任何事件侦听器。

预期结果 设置状态但不会失去焦点或重新渲染

快餐、代码示例、屏幕截图或 link 存储库： 世博会范例 https://snack.expo.io/@ksi9302/1f9369

大家好，这是我向 React Native 提交的错误报告。但是我不确定我这里是不是做错了什么。

到目前为止我已经尝试过但不起作用

去掉所有样式。
使用 class 反应组件制作自定义输入组件，禁用 shouldComponentUpdate
没有绑定值
制作不同的状态结构并实际在对象内传递{}
制作虚拟密钥

我所知道的会起作用

摆脱自定义包装器并使用纯 JSX（换句话说，不将 TextInput 作为子组件传递）//当应用变大时几乎不可能

糟糕的妥协

使用 AutoFocus={true} //在 Web 上工作正常，但在移动设备上，键盘闪烁很多。

Answer 1

取出包装器，因为它会因搜索值更改而不断重新呈现。

import React, { useState } from "react";
import { View, TextInput } from "react-native";

const Test = () => {
  const handleChange = e => {
    setSearch(e);
  };
  const [search, setSearch] = useState(null);

  return (
    <Wrapper>
      <TextInput
        value={search}
        onChangeText={e => {
          handleChange(e);
        }}
        placeholder="type here"
      />
    </Wrapper>
  );
};

const Wrapper = props => {
    return (
      <View
        style={{
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center",
          display: "flex",
        }}
      >
        {props.children}
      </View>
    );
  };

export default Test;

在自定义组件内调用 useState Hook 时反应 Native TextInput ReRenders

React Native TextInput ReRenders when calling useState Hook inside a custom component

javascript

textinput

reactjs

react-native

expo