React Native редактируемый FlatList Как редактировать данные элемента - PullRequest
Новая
       63

React Native редактируемый FlatList Как редактировать данные элемента

0 голосов
/ 08 мая 2020

React Native editable FlatList - Как редактировать данные элемента в списке?

Привет, сообщество разработчиков, я новичок в реактивном нативном коде и мне нужна помощь. Я пытаюсь обработать обновление данных в FlatList. где пользователь может изменить текстовое имя по своему усмотрению. Например, если пользователь создает папку с именем «Bar», но позже решает изменить имя на «Bar1». Как мне это сделать??? Вот мой код на данный момент ...

My Modal State 

const [modalVisible, setModalVisible] = useState(false);

My FlatList Component ... discard data = {folderToDisplay} 

<FlatList numColumns={4} data={folderToDisplay} renderItem={renderItem} />

My renderItem = {renderItem} задается так: где {itemData.item.value} здесь, я получаю свое текстовое имя. Мы можем заменить {itemData.item.value} на Bar, если вы используете sh. 

    const renderItem = (itemData) => {
    return (
      <View style={styles.folderNameContainer}>
        <TouchableOpacity
          onPress={() => {
            setModalVisible(true);
          }}
        >
          <Text style={styles.itemText}>{itemData.item.value}</Text>
        </TouchableOpacity>
      </View>
    );
  };

Когда я нажимаю текстовое имя, открывается модальное окно. 

<Modal animationType="fade" transparent={true} visible={modalVisible}>
        <SimpleModal
          closeModal={onCloseModal}
        />
      </Modal>

... И когда я нажимаю кнопку «Отмена», он закрывается. 

const onCloseModal = () => {
    setModalVisible(false);
  };

Мой компонент SimpleModal настроен следующим образом: я мог бы сделать весь свой код в одном месте, но он выглядит некрасиво. 

const SimpleModal = (props) => {
  return (
    <View style={styles.centeredView}>
      <View style={styles.modalView}>
        <Text style={styles.modalText}>Change Name!</Text>
        <TextInput
          style={styles.textInput}
          placeholder="Type Here..."
          maxLength={15}
        />
        <View style={styles.saveAndCancelContainer}>
          <View style={styles.button}>
            <Button title="Save" color="#87CEEB" onPress={props.renameFolder} />
          </View>
          <View style={styles.button}>
            <Button title="Cancel" color="red" onPress={props.closeModal} />
          </View>
        </View>
      </View>
    </View>
  );
};

Теперь цель здесь в моем TextInput, пользователь вводит новое имя и затем нажимает Сохранить. Когда onPress обновит имя для нового имени. и закройте модальное окно. Пока вот что у меня: 

<Modal animationType="fade" transparent={true} visible={modalVisible}>
        <SimpleModal
          renameFolder={handleRenameFolder}
        />
      </Modal>

const handleRenameFolder = () => {
    ///....????
    setModalVisible(false);
  };
...