Реагируйте на собственный открытый модал с опцией ввода и обновите текстовое поле cardItem - PullRequest
Новая
       24

Реагируйте на собственный открытый модал с опцией ввода и обновите текстовое поле cardItem

0 голосов
/ 06 июля 2019

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

Компонент: 

...
import {
  Container, Header, Content, Card, Input,
  CardItem, Text, Right, Icon, Row,
  Left, Body, Title, Button, Label }
from 'native-base';
...
constructor(props) {
    super(props);
    this.state = {
      tenantData: {},
      visibleModal: false,
      modalField: '',
      modalLabel: '',
    };
}

renderButton = (text, onPress) => (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.modalButton}>
        <Text>{text}</Text>
      </View>
    </TouchableOpacity>
  );

  renderModalContent() {
    <View style={styles.modalContent}>
      <Label>{this.state.modalLabel}</Label>
      <Input defaultValue={this.state.modalField} />
      {this.renderButton('Update', () => this.setState({
        visibleModal: null,
        modalField: '',
        modalLabel: '',
      }))}
    </View>
  }
...
render() {
  const {
      FirstName, LastName, Email, Phone, Unit, MiddleName
    } = this.state.tenantData;
  return (
    <Container>
    ...
    <Modal
        isVisible={this.state.visibleModal === true}
        animationIn={'slideInLeft'}
        animationOut={'slideOutRight'}
    >
        {this.renderModalContent()}
    </Modal>
    ...
    <Card>
        <TouchableOpacity
            onPress={() => this.setState({
                visibleModal: true,
                modalField: 'FirstName',
                modalLabel: { FirstName },
              })}
         >
             <CardItem>
                <Left>
                  <FontAwesome5 name="user-edit" />
                  <Text>First Name</Text>
                </Left>
                <Right>
                  <Row>
                    <Text style={styles.valueText}>{FirstName}   </Text>
                    <Icon name="arrow-forward" />
                  </Row>
                </Right>
              </CardItem>
        </TouchableOpacity>
       ... BELOW FEW MORE TouchableOpacity for other items ...

Будет ли работать для реагирования нативной?Прямо сейчас модал открывается и останавливает экран (в модале ничего не отображается).Кроме того, после редактирования данных в модальном входе, как я могу изменить значение {FirstName}?

Закусочная ссылка: https://snack.expo.io/rJbAI_Cxr

...