Javascript 如何更改平面列表中TextInput组件的道具？

我是个新手

我想做的是制作一个类似谷歌地图的应用程序。在MainMap.js屏幕上，当我们进入时，屏幕将立即生成2个搜索栏。第一个将有文本显示在您的位置。第二个等将为空，供用户键入以搜索位置

但是，我对平面列表组件有一些问题。在PlaceInput组件中，我使用defaultValue作为文本输入的道具。然后在MainMap.js中，我将有一个初始设置为您位置的状态，然后当平面列表从第二个PlaceInput组件开始渲染时，我将其更改为null

这是MainMap.js*

我很想听听你对我的帮助的评论

---

另外，也可以自由地给出其他方法，因为我认为我的方法不够优化。我也在为生产构建此属性。

如果我正确理解了您的问题，您会问如何根据属性在平面列表数据中的位置有条件地设置属性值。基本上，您希望第一个PlaceInput组件显示您所在位置的输入文本值，而其他组件没有

更新PlaceInput的API以接收另一个道具，以指示是否显示默认值

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}
/>
...

---

我利用了Drew Reese的回答，但它不起作用

我发现它之所以不起作用是因为value prop，它的值是由this.state.destinationInput设置的，而this.state.destinationInput处于构造函数中的状态。我再一次用Drew的方法代替了value道具，它很有效

                     <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}
                    />

---

非常感谢Drew Reese

我能问一下为什么我们使用{index，item}而不是index，item吗？因为我的平面列表数据道具只是一个升序数字的数组。我试着按照你的方式绘制，但没有效果。这让我很困惑，因为我试图将defaultValue=您的位置放在TextInput的PlaceInput中，它甚至没有显示您的位置啊。我知道它为什么不起作用。这是因为value prop的值是由this.state.destinationInput设置的，它处于构造函数中的状态。我在价值道具中使用了你的方式，这很有效！非常感谢你的帮助@Drew@Marwin使用{index，item}，因为这是回调的签名。renderItem是一个回调函数，通过项、索引和分隔符属性传递单个对象参数。在我的例子中，我只是利用了索引。您可以使用对象解构来解包并直接在函数签名中访问它们。我也很乐意帮忙。

...
<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}
/>
...

<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}
      />
    )
  }}
/>

                     <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}
                    />