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

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

下面是我如何尝试这样做的代码。此代码的问题是，在按下任何TouchableOpacity按钮后，由于上一次迭代覆盖了

textInputRef

，最后一次TextInput将始终处于焦点位置

是否有办法使

textInputRef

包含对TouchableOpacity将按下的文本输入的引用？

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

constlistcomponent=（{list}）=>{
const textInputValue=useRef（“”）；
const textInputRef=useRef（null）；
changeItemName=（文本）=>{
textInputValue.current=文本；
};
返回(
{list.length>0&&
list.map（（项目）=>(
{
textInputValue.current=item.name；
textInputRef.current.focus（）；
}}>
))}
);
};

我认为创建一个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>
    );
  };

constlistcomponent=（{list}）=>{
const textInputValue=useRef（“”）；
const textInputRef=useRef（null）；
changeItemName=（文本）=>{
textInputValue.current=文本；
};
const collectionRef=useRef（list.map（（）=>createRef（））；
返回(
{list.length>0&&
list.map（（项目、索引）=>(
{
textInputValue.current=item.name；
collectionRef[index].current.focus（）；
}}>
))}
);
};

See@D10S我认为这可能有效，但我不确定这对于大型列表来说是否是一个好的性能解决方案。我认为这不应该对性能有太大的影响，因为向项目添加一个ref不会消耗太多。如果它真的很大，那么您应该使用VirtualizedList，比如“FlatList”。