使用输入选项 React Native 打开 Modal 并更新 cardItem 文本字段

Question

我正在尝试使用模式创建编辑字段。我在 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 ...

它适用于 React Native 吗？现在，模态打开并冻结屏幕（模态中没有显示）。另外，在模态输入中编辑数据后，如何更改 {FirstName} 的值？

小吃link：https://snack.expo.io/rJbAI_Cxr

Answer 1

你的零食有很多问题。在 NativeBase 中，您需要包含一个 Text 标签来命名您的 Button。没有接受输入的输入标签。我从未使用过 react-native-modal，所以我从 react-native 切换到 Modal 组件。

您将在下面看到我更改的代码的 3 个部分：
(1) 从 'react-native';
导入模态 (2) renderModalContent() 函数
(3)模态分量


    ...
    import {
      Container, Header, Content, Card, Input,
      CardItem, Text, Right, Icon, Row,
      Left, Body, Title, Button, Label, Form, Item }
    from 'native-base';
    ...
    import { Modal } from 'react-native';  // CHANGE_HERE

    class TenantDetails extends Component {
      constructor(props) {
        super(props);
        this.state = {
          tenantData: {
          FirstName: 'Jonh', LastName: 'Doe', Email: 'jonh@test.com', Phone: 'xxx-xxx-xxxx',
          Unit: '101', MiddleName: '',
          },
          visibleModal: false,
          modalField: '',
          modalLabel: '',
        };
      } 

      renderModalContent() {  //CHANGE_HERE
        return (
        <View style={{ flex: 1 }}>
          <Form>
            <Text>Hello!</Text>
            <Item fixedLabel>
              <Label>First Name</Label>
              <Input 
                value={this.state.tenantData.FirstName}
                onChangeText={(text) => { 
                  const myTenantData = {...this.state.tenantData, FirstName: text};
                  this.setState({tenantData: myTenantData})}}
              />
            </Item>
            <Button
              onPress={() => this.setState({
                visibleModal: false
              })}
            >
            <Text>Hide Modal</Text>
            </Button>
          </Form>
        </View>
        )
      }

      render() {
        const {
          FirstName, LastName, Email, Phone, Unit, MiddleName
        } = this.state.tenantData;
        return (
          <Container>
            <Header>
              <Left>
                <Button
                  transparent
                >
                  <Icon name='arrow-back' />
                </Button>
              </Left>
              <Body>
                <Title>{FirstName} {LastName}</Title>
              </Body>
              <Right />
            </Header>
            <Content>

    ...  // CHANGE_HERE

              <Modal
                  transparent={false}
                  visible={this.state.visibleModal}
                  animationType="slide"
              >
                  {this.renderModalContent()}
              </Modal>
              <Card>
                <View style={styles.containerTextHeader}>
                  <Text style={styles.infoTextHeader}>Tenant Details</Text>
                </View>
                <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>
                <TouchableOpacity onPress={() => Alert.alert('OK')} >
                  <CardItem>
                    <Left>
                      <FontAwesome5 name="user-edit" />
                      <Text>Middle Name</Text>
                    </Left>
                    <Right>
                      <Row>
                        <Text style={styles.valueText}>{MiddleName}   </Text>
                        <Icon name="arrow-forward" />
                      </Row>
                    </Right>
                  </CardItem>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => Alert.alert('OK')} >
                  <CardItem>
                    <Left>
                      <FontAwesome5 name="user-edit" />
                      <Text>Last Name</Text>
                    </Left>
                    <Right>
                      <Row>
                        <Text style={styles.valueText}>{LastName}   </Text>
                        <Icon name="arrow-forward" />
                      </Row>
                    </Right>
                  </CardItem>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => Alert.alert('OK')} >
                  <CardItem>
                    <Left>
                      <FontAwesome name="paper-plane" />
                      <Text>Email</Text>
                    </Left>
                    <Right>
                      <Row>
                        <Text style={styles.valueText}>{Email}   </Text>
                        <Icon name="arrow-forward" />
                      </Row>
                    </Right>
                  </CardItem>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => Alert.alert('OK')} >
                  <CardItem>
                    <Left>
                      <FontAwesome name="phone" />
                      <Text>Phone</Text>
                    </Left>
                    <Right>
                      <Row>
                        <Text style={styles.valueText}>{Phone}   </Text>
                        <Icon name="arrow-forward" />
                      </Row>
                    </Right>
                  </CardItem>
                </TouchableOpacity>
              </Card>
            </Content>
          </Container>
        );
      }
    }

    ...

使用输入选项 React Native 打开 Modal 并更新 cardItem 文本字段

React Native open Modal with input option and update cardItem text field

react-native

native-base