Question

基本上，我有一个表单，其中包含一个字段列表，其中还包括TextInput。

我遇到的问题是，用户每次聚焦TextInput时，都会立即失去焦点，并且当我将状态设置为用户类型时也是如此。另外，在用户输入时失去焦点之前会稍有延迟，这与用户首次将焦点对准焦点时会立即失去焦点相反。

在自己的设备上调试时，我不会遇到此问题，只有在与其他设备一起调试时，才会遇到此问题。

这只是实际代码的简化版本：

const data = [
  {
    options: [],
    type: "text",
    required: true,
    label: "first name"
  },
  {
    options: [],
    type: "text",
    required: true,
    label: "last name"
  }
];

function App() {
  const [names, setNames] = React.useState({});

  return (
    <FlatList
      data={data}
      keyExtractor={({ label }) => label}
      renderItem={({ item }) => {
        const { type, label, options, required } = item;

        return (
          <TextInput
            placeholder={label}
            value={names[label]}
            onChangeText={value => {
              setNames({...names, [label]: value});
            }}
          />
        );
      }}
    />
  );
}

我不确定这是设备问题还是本机问题，还是我的代码问题。

Answer 1

我设法解决了这个问题，不知道为什么，但是上述行为仅发生在列表底部或附近的TextInput元素上。

我认为这与键盘弹出时元素的行为方式有关。也许FlatList呈现项目的方式。我将其更改为ScrollView并仅映射数据后，问题停止了。

TextInput失去焦点

1 个答案: