如何更改 FlatList 中 TextInput 组件的道具？

Question

我是 React Native 的新手。我想做的是制作一个类似谷歌地图的应用程序。在MainMap.js屏幕上，当我们进入时，屏幕会立即生成 2 个搜索栏。第一个将有文本"Your location"。第二个以此类推为空，供用户输入搜索位置。但是，我在使用该FlatList组件时遇到了一些问题。在我的PlaceInput组件中，我使用defaultValue, 作为道具来输入文本。然后在 中MainMap.js，我将有一个最初设置为 的状态"Your Location"，然后我将其更改为null从FlatList第二个PlaceInput组件开始渲染的时间。这是MainMap.js*import React from 'react';import {     TouchableWithoutFeedback,    StyleSheet,    Keyboard,    PermissionsAndroid,    Platform,     View,    Button,    FlatList,    Dimensions} from 'react-native';import PlaceInput from '../components/PlaceInput';import axios from 'axios';import PolyLine from '@mapbox/polyline';import MapView, {Polyline, Marker} from 'react-native-maps';import Geolocation from 'react-native-geolocation-service';const INCREMENT = 1;const HEIGHT = Dimensions.get('window').height;const WIDTH = Dimensions.get('window').width;class MainMap extends React.Component{    constructor(props){        super(props);        this.state={            _userLocationDisplayed: null,            userLatitude: 0,            userLongitude: 0,            numOfInput:[0,1],            counter: 1,        };    };    componentDidMount(){        this._requestUserLocation();    };    // Get user current location    // Ask user permission for current location    // Request the Directions API from Google    // Get the formatted_address & name from Google Places API    // Adding a search bar    onAddSearch(){        this.setState((state) => ({            counter: state.counter + INCREMENT,            numOfInput: [...state.numOfInput, state.counter],        }));    };    onChangeSearchDisplay(){        this.setState({            _userLocationDisplayed: null        })    };

Answer 1

如果我正确理解您的问题，您是在询问如何根据它在平面列表数据中的位置有条件地设置一个道具值。基本上，您希望第一个PlaceInput组件显示“您的位置”的“输入”文本值，其余的则什么都没有。

更新 APIPlaceInput以接受另一个道具以指示是否显示默认值。

PlaceInput.js

...

<TextInput 

  key={this.id}

  autoCorrect={false}

  autoCapitalize='none'

  style={styles.inputStyle}

  placeholder='Search your places'

  onChangeText={(input) => {

    this.setState({destinationInput: input});

    this.getPlacesDebounced(input);

  }}

  value={this.state.destinationInput}

  defaultValue={this.props.displayDefaultValue ? this.props.defaultValue : null}

/>

...

并传入是否有任何特定的PlaceInput内容应该显示它。由于您只想显示第一个而其余的不显示，因此使用数组索引是一个不错的起点。在这里，我们可以利用这样一个事实，即在javascript 0中是一个虚假值，而所有其他数字都是真实的。使用!indexthen !0is true while !1, !2, etc, are all false。

MainMap.js

<FlatList

  data={this.state.numOfInput}

  keyExtractor={(item, index) => item}

  renderItem={({ index, item }) => {

    return(

      <PlaceInput

        id={item}

        defaultValue="Your Location"

        displayDefaultValue={!index} // index 0 is falsey, all others truthy

        onDelete={this.onDeleteSearch}

        showDirectionOnMap={this.showDirectionOnMap}

        userLatitude={userLatitude}

        userLongitude={userLongitude}

        userLocationDisplayed={this.state._userLocationDisplayed}

      />

    )

  }}

/>

Answer 2

我利用了德鲁里斯的回答，但它不起作用

我发现了为什么它不起作用，因为valueprop 的值是由this.state.destinationInput构造函数中的 state 中的 " " 设置的。value我再次在道具中使用 Drew 的方式，并且它有效

                     <TextInput 

                        key={this.id}

                        autoCorrect={false}

                        autoCapitalize='none'

                        style={styles.inputStyle}

                        placeholder='Search your places'

                        onChangeText={(input) => {

                            this.setState({destinationInput: input});

                            this.getPlacesDebounced(input);

                        }}

                        value={this.props.displayDefaultValue ? this.props.defaultValue : this.state.destinationInput}

                    />