Question

我想在顶部有两个标签按钮，下面有一些内容。

之后，内容我需要一个像这样的视图：

<Form style={styles.form}>
    <Label style={styles.label}>
        data 1
    </Label>
    <Item >
        <Input/>
    </Item>
    <Label style={styles.label}>
        Data2
    </Label>
    <Item>
        <Input/>
    </Item>
</Form>

当我点击第一个按钮时，它处于活动状态。我需要那个表格才能出现。之后，当我点击第二个按钮时，我需要将表单更改为：

<Form style={styles.form}>
    <Label style={styles.label}>
        data 3
    </Label>
    <Item >
        <Input />
    </Item>
</Form>

我理解的是我需要一个状态变量。

state = {showFirst : true, showSecond:false }

并且在某处有条件：

if showFirst true, display FORM1
if showSecond true, display FORM2

并且

onPress {() => {this.setState{{the state = true)}}

但是我不知道如何将它绑定在一起，因为我第一次使用React Native。目前我正在使用的是一个好习惯吗？我为两个表单设置了单独的状态变量，因为稍后可能会添加另一个按钮。所以我不能只有一个按钮：

state = { showForm: true}
showForm?Form1:Form2
onPress={() => {this.setState{{showForm:false)}}

我怎样才能让它发挥作用？

Answer 1

这是您所说的尝试实现的最小示例组件：

import React, {Component} from ‘react’;
import {Button, View} from ‘react-native’;

export default class ExampleComponent extends Component {
   constructor(props) {
      super(props);
      this.state = {
         showFrom: 0
      };
    }

      render() {
         var form;
         if (this.state.showForm === 0) {
            form = (
               <View> INSERT_FORM1 </View>
            );
         } else if (this.state.showForm === 1) {
            form = (
               <View> INSERT_FORM2 </View>
            );
         }

         return (
            <View>
               <Button title=‘Show Form 1’ onPress={() => this.setState({showForm: 0})}/>
               <Button title=‘Show Form 2’ onPress{() => this.setState({showForm: 1})}/>
               {form}
            </View>
         );
      }
}

您可以根据组件道具和状态动态选择要显示的内容在上面的示例中，我使用了一个数值来确定要显示的表单，以便最大限度地减少以后在表单计数扩展时必须跟踪的状态值的数量。如果有更多可用的表单选择，switch语句将是更好的选择，但我现在使用if-else来便于输入。

OnPress更改VIEW内容

1 个答案: