Как я могу установить фокус только на один TextInput в элементе списка после нажатия TouchableOpacity в этом элементе? - PullRequest
Новая
       86

Как я могу установить фокус только на один TextInput в элементе списка после нажатия TouchableOpacity в этом элементе?

0 голосов
/ 14 июля 2020

У меня есть список из многих элементов, каждый из которых имеет TextInput и TouchableOpacity, обернутые View. Я пытаюсь установить фокус на TextInput в элементе списка, в котором была нажата TouchableOpacity. Это необходимо для редактирования имени каждого элемента.

Ниже приведен код того, как я пытался это сделать. Проблема этого кода в том, что после нажатия на любой из TouchableOpacity последний TextInput всегда будет сфокусирован из-за того, что последняя итерация перезаписывает textInputRef.

Есть ли способ сделать textInputRef содержат ссылку на TextInput, который 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>
    );
  };

1 Ответ

1 голос
/ 14 июля 2020

Я думаю, что создание массива ссылок поможет вам решить.

Попробуйте этот способ 

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