在此项中按下 TouchableOpacity 后，如何将焦点仅设置到列表项中的一个 TextInput？

Question

我有一个包含许多项目的列表，其中每个项目都有 TextInput 和由 View 包装的 TouchableOpacity。我试图在按下 TouchableOpacity 的列表项中将焦点设置在 TextInput 上。需要编辑每个项目的名称。

以下是我尝试执行此操作的代码。此代码的问题在于，在按下任何 TouchableOpacity 后，最后一个 TextInput 将始终聚焦，因为最后一次迭代会覆盖 textInputRef.

有没有办法让 textInputRef 包含对 TouchableOpacity 将按下的 TextInput 的引用？

   const ListComponent = ({list}) => {
    const textInputValue = useRef('');
    const textInputRef = useRef(null);

    changeItemName = (text) => {
     textInputValue.current = text;
    };

    return (
      <ScrollView>
        {list.length > 0 &&
          list.map((item) => (
            <View key={item._id}>
              <TouchableOpacity>
                <View
                  <Text>{`Item: `}</Text>
                  <TextInput ref={textInputRef} onChangeText={changeItemName}>
                    {item.name}
                  </TextInput>
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => {
                  textInputValue.current = '';
                }}>
                <Icon name={'check'} size={25} color="#000" />
              </TouchableOpacity>
              <View>
                <TouchableOpacity
                  onPress={() => {
                    textInputValue.current = item.name;
                    textInputRef.current.focus();
                  }}>
                  <Icon name={'edit'} size={25} color="#000" />
                </TouchableOpacity>
              </View>
            </View>
          ))}
      </ScrollView>
    );
  };

Answer 1

我认为创建一个 ref 数组可以帮助您解决问题。

试试这个方法

const ListComponent = ({list}) => {
    const textInputValue = useRef('');
    const textInputRef = useRef(null);

    changeItemName = (text) => {
     textInputValue.current = text;
    };

    const collectionRef = useRef(list.map(() => createRef()));

    return (
      <ScrollView>
        {list.length > 0 &&
          list.map((item, index) => (
            <View key={item._id}>
              <TouchableOpacity>
                <View
                  <Text>{`Item: `}</Text>
                  <TextInput ref={collectionRef.current[index]} onChangeText={changeItemName}>
                    {item.name}
                  </TextInput>
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => {
                  textInputValue.current = '';
                }}>
                <Icon name={'check'} size={25} color="#000" />
              </TouchableOpacity>
              <View>
                <TouchableOpacity
                  onPress={() => {
                    textInputValue.current = item.name;
                    collectionRef[index].current.focus();
                  }}>
                  <Icon name={'edit'} size={25} color="#000" />
                </TouchableOpacity>
              </View>
            </View>
          ))}
      </ScrollView>
    );
  };

在此项中按下 TouchableOpacity 后，如何将焦点仅设置到列表项中的一个 TextInput？

How can i set focus to only one TextInput in list item after TouchableOpacity pressed in this item?

javascript

ref

react-native