Question

我目前正在使用React Native开发应用程序。

此试用版应用程序的组件具有TextInput和两个按钮（ADD和DELETE）。

当我按下“添加”按钮时，将出现一个新组件。如果我按DELETE按钮，则相同的组件消失。

屏幕就像下面的照片一样：

我用与组件索引相同的索引来控制TextInput。

我的问题是：为什么我不能在此代码中照常输入一些文本？

每次输入1个字时，都必须使光标聚焦。

每按一次键，输入区域中的竖线就会闪烁（我在下面的照片中查看）。

如何解决此问题？

而且，我想用array []而不是object {}控制TextInput的输入值，因为在数组的情况下，更容易删除组件滑动索引和值，如下所示：

我不知道用对象控制索引和值，这对我的技能来说现在很复杂，但是如果有一些解决使用对象的好方法，我希望知道这一点。

代码如下：

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

function Item({ number, handleInput, handleAdd, handleDelete, index }) {
  return (
    <View style={styles.list}>
      <Text>{index}</Text>
      <TextInput
        style={{ borderWidth: 1 }}
        value={number[index]}
        onChange={(e) => {
          handleInput(index, e.nativeEvent.text);
        }}
      ></TextInput>
      <Button
        title="ADD"
        onPress={() => {
          handleAdd();
        }}
      />
      <Button
        title="DELETE"
        onPress={() => {
          handleDelete(index);
        }}
      />
    </View>
  );
}

export default function TestStateArray() {
  const [count, setCount] = useState(1);
  const [number, setNumber] = useState([]);

  function handleAdd() {
    setCount((v) => v + 1);
  }

  function handleDelete(index) {
    setCount((v) => v - 1);
    setNumber((v) => {
      const ret = v.slice();
      ret.splice(index, 1);
      return ret;
    });
  }

  function handleInput(index, text) {
    setNumber((v) => {
      const ret = v.slice();
      ret[index] = text;
      return ret;
    });
  }

  return (
    <View>
      {Array.from({ length: count }, (_, i) => (
        <Item
          number={number}
          handleInput={handleInput}
          handleAdd={handleAdd}
          handleDelete={handleDelete}
          key={i + "-" + number}
          index={i}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  list: {
    margin: 10,
    padding: 10,
    backgroundColor: "#ddd",
  },
});

在我得到一些答案和评论之后，我尝试更改像波纹管这样的代码，但是它仍然存在相同的问题...

// onChange={(e) => {
//   handleInput(index, e.nativeEvent.text);
      
onChangeText={(text) => {
  handleInput(index, text);
}}

节点：12.18.3

反应原生：4.10.1

博览会：3.22.3

Answer 1

React Native在TextInput组件上具有onChangeText事件，您可以尝试该事件吗？

Answer 2

发生上述问题是因为您的句柄更改功能错误。

请更改...

const [number, setNumber] = useState({}); // change array to Object in useState.

用以下函数替换您的处理程序：

  function handleInput(index, text) {
    setNumber({ ...number, index: text });
  }

TextInput / Input元素失去对按键的关注

2 个答案: