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

Question

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

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>
    );
  };