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

Posted 2023-04-18

【中文标题】在此项目中按下 TouchableOpacity 后，如何将焦点设置为列表项中的一个 TextInput？

【英文标题】：How can i set focus to only one TextInput in list item after TouchableOpacity pressed in this item?

【发布时间】：2020-11-03 20:52:27

【问题描述】：

我有许多项目的列表，其中每个项目都有由 View 包装的 TextInput 和 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>
    );
  ;

【问题讨论】：

见***.com/questions/55995760/…

@D10S 我认为这可能有效，但我不确定这对于大型列表是否是一个良好的性能解决方案。

我认为它不会改变性能，因为向项目添加 ref 并没有那么复杂。如果它真的很大，那么你应该使用 VirtualizedList，比如 'FlatList'。

【参考方案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>
    );
  ;