javascript - 在 react native 中使用 map 函数从 textinput 动态呈现值

Question

我想要实现的是一个发货清单，只要用户输入一个发货清单并从地址下拉列表中选择，下面就会出现一个带有新发货地址的框然后搜索输入被隐藏如果用户按下“添加新”按钮，搜索输入再次出现，然后用户可以输入另一个送货地址，另一个框出现在另一个带有新地址的框下方此外，按下删除按钮“x”，该特定送货地址将被删除，而另一个（s ） 保持。

任何建议或更正

下面是我的代码

ShippingList.js

    class ShippingList extends Component {
      constructor(props) {
        super(props);
        this.state = {
          shippingAddressSearch: true,
          shippingAddListShow: false,
          shippingAddress: '',
          shippingAddressList: [],
        };
      }

      handleLocationSelected => (data, { geometry }) => {
        const {
          location: { lat: latitude, lng: longitude }
        } = geometry;
        const shippingAddress = data.structured_formatting.main_text;

        this.setState({
          shippingAddress,
          destination: {
            latitude,
            longitude,
            title: shippingAddress,
            latitudeDelta: 0.0143,
            longitudeDelta: 0.0134,
          },
          shippingAddressSearch: false,
        });
      };

      render() {
        const { shippingAddressSearch, shippingAddress, shippingAddListShow } = this.state;
        return (
          <SafeAreaView style={styles.AndroidSafeArea}>
            <View style={styles.AndroidSafeArea}>                      
              <View style={styles.inputWrapper}>
              <View style={styles.screenHeaderWrapper}>
                <TouchableOpacity
                   style={addNewContainer}
                   onPress={this.addNewShippingAddress}
                >
                 <Text style={addNewTextStyle}>Add New<\Text>
                 <\TouchableOpacity>
                <View style={styles.inputContainer}>
                {shippingAddressSearch && (
                <LocationSearch
                  onLocationSelected={this.handleLocationSelected}
                />)}

                  //this is the box I want to display onlocation selected
                  <View style={styles.locationWrapper}>
                    <AntDesign
                      name='home'
                      size={20}
                      color='#535BFE'
                      style={styles.leftNavIcon}
                    />
                    <Text style={styles.locationTextStyle}>{shippingAddress}</Text>
                    <TouchableOpacity
                    onPress={this.handleRemoveShippingAddress}
                      style={styles.rightNavIcon}
                    >
                      <AntDesign
                        name='closecircle'
                        size={20}
                        color='#AEB4C0'
                      />
                    </TouchableOpacity>
                  </View>
                ))}
                </View>
              </View>
            </View>
          </SafeAreaView>
        );
      }
    }


    const styles = StyleSheet.create({
      AndroidSafeArea: {
        flex: 1,
        flexWrap: 'wrap',
        backgroundColor: '#F9F9FB',
        paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
      },
      inputWrapper: {
        flexWrap: 'wrap',
        flex: 0.9,
      },

      screenHeaderWrapper: {
        flexWrap: 'wrap',
        flex: 0.1,
        flexDirection: 'row',
        backgroundColor: '#F9F9FB',
        justifyContent: 'center',
        paddingHorizontal: 20,
      },
      addNewTextContainer: {
        flex: 0.5,
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignItems: 'flex-end',
      },
      addNewtextStyle: {
        fontSize: 18,
        fontFamily: 'RobotoMedium',
        color: '#535BFE',
      },
      inputContainer: {
        flexWrap: 'wrap',
        flex: 0.9,
        backgroundColor: '#F9F9FB',
        padding: 20,
      },
      locationWrapper: {
        flexDirection: 'row',
        flex: 0.1,
        backgroundColor: '#FFFFFF',
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 0 },
        shadowOpacity: 0.2,
        shadowRadius: 10,
        padding: 15,
      },
      leftNavIcon: {
        flex: 0.1,
        flexWrap: 'wrap',
        textAlign: 'left',
      },
      rightNavIcon: {
        flex: 0.1,
        flexWrap: 'wrap',
        alignItems: 'flex-end',
      },
      locationTextStyle: {
        color: '#34495E',
        fontSize: 16,
        flexWrap: 'wrap',
        flex: 0.8,
      },
    });

    export default ShippingList;

标签： javascriptarraysreactjsreact-native