Javascript 在自定义组件内调用useState钩子时，响应本机TextInput ReRenders

说明 当TextInput组件触发操作（如onChangeText或onKeyPress方法中的操作）并触发setState时，该组件将重新渲染并失去焦点

反应本机版本： 0.62（由于使用Expo，无法升级）

复制步骤 提供重现问题的详细步骤列表

创建一个自定义包装器组件，如

声明useStateHook

通过直接JSX或自定义组件将TextInput传递给包装器组件

将setState函数绑定到TextInput的任何事件侦听器

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

零食、代码示例、屏幕截图或存储库链接： 世博会实例

嗨，伙计们，这是我做的一个bug报告。 但我不确定我是否做错了什么

到目前为止我尝试过但不起作用的内容

摆脱所有的风格

使用类react component创建自定义输入组件，禁用shouldComponentUpdate

不具约束力的价值

创建不同的状态结构并实际在对象{}内传递

制造假钥匙

我所知道的会起作用

• 摆脱自定义包装器并使用普通JSX（换句话说，不将TextInput作为子组件传递）//当应用程序变得更大时，这几乎是不可能的

糟糕的妥协

• 在Web上使用AutoFocus={true}//可以很好地工作，但在移动设备上，键盘经常闪烁

---

取出包装，因为由于搜索值的更改，包装会不断被重新查找

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;

import React，{useState}来自“React”；
从“react native”导入{View，TextInput}；
常数测试=（）=>{
常量handleChange=e=>{
研究（e）；
};
const[search，setSearch]=useState（null）；
返回(
{
handleChange（e）；
}}
占位符=“在此处键入”
/>
);
};
const Wrapper=props=>{
返回(
{props.children}
);
};
导出默认测试；

您好，D10，非常感谢您的回答。是的，这样就可以了。然而，在我的实际项目中，这种方法带来了很多问题，因为在包装器组件中，还有另一个客户组件，它利用了顶部组件中声明的许多函数，如果我必须将所有这些组件移出父组件，我将不得不通过一系列的道具，基本上失去了在父组件中声明子组件的最佳优势。这仅仅是React编程中不鼓励的方式，还是您希望这个问题在将来得到解决？通过大量的道具，问题是什么？？无论如何，如果我没弄错的话，你需要的是使用HOC。请注意，如果父项和子项位于同一个组件中，那么拆分它们是没有逻辑的，感谢您提供的宝贵信息，我将查看HOC。不过，我现在不知怎么的让它工作了。在我的代码中，包装有和内部，然后我有我的，其中包括TextInput，现在，我已经将包装移到了外部，头部从一开始就是一个导入的组件，对于这个FunctionButtons组件，我只是将JSX移到了头部，问题就解决了，我真的不明白为什么要从嵌套子组件返回完全相同的JSX，因为它是相同的代码。嗯，我想我得做些家庭作业了。。再次感谢你的帮助@D10我也遇到了同样的问题。事实上，去掉“包装纸”对我很有效。我不明白的是为什么这是一件事。为什么我不能在同一时间使用useState包装文本输入？我没有连接点。。。