TextInput失去焦点

时间:2020-07-03 13:38:57

标签: reactjs react-native

基本上,我有一个表单,其中包含一个字段列表,其中还包括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});
            }}
          />
        );
      }}
    />
  );
}

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

1 个答案:

答案 0 :(得分:0)

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

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