React native 如何在平面列表中隐藏/显示文本输入？

我是react native的新手，我需要在每个评论回复选项上显示和隐藏文本输入。如何唯一化每个部分，以便我可以在每次单击按钮时隐藏和显示文本输入

以下是我的简单列表：

<FlatList
  data={item.comments}
  keyExtractor={this._keyExtractor}
  renderItem={this.renderRowItem}
  extraData={this.state}
/>

---

在replyboxShow状态下，所有项目都将显示或隐藏， 我创建replyboxShowId状态来保存元素的item\u id 你想表现出来

renderRowItem = (itemData) => {
    Moment.locale('en');
    return (
      <View style={styles.commentSection}>
        <View style={{flexDirection:'row'}}>
          <View style={{flex:1,flexDirection:'row'}}>
            <Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
            source={{ uri: this.state.profile_image }} resizeMode='cover' />
            <View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
              <View style={{flexDirection:'row',paddingTop:5}}>
                <Text style={{fontWeight:'600',fontSize:14}}>
                {itemData.item.firstName} {itemData.item.surname}</Text>
                <Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
                {Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
              </View>
              <Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
              {itemData.item.comment}</Text>
              <Text onPress={this.ShowHideTextComponentView.bind(this,itemData.item._id)} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
              Reply</Text>

              <View>
                <FlatList
                  data={itemData.item.replies}
                  keyExtractor={this._keyExtractor}
                  renderItem={this.renderRowReply}
                />
              </View>
              <View>
              {
                this.state.replyBoxShowId === itemData.item._id ?
                <View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
                  <TextInput
                    style = {[styles.inputReplyBox,
                    !this.state.postValidate ? styles.error : null]}
                    placeholder="Enter message here"
                    placeholderTextColor="grey"
                    onChangeText = {reply => this.setState({reply})}
                  />
                  <TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
                  onPress={() => this.replyCom(itemData.item._id)}>
                    <Icon name="paper-plane-o" size={20} color="#F766FF" />
                  </TouchableOpacity>
                </View>
                : null
              }

              </View>

            </View>
          </View>
        </View>
      </View>

    )
  }

---

在replyboxShow状态下，所有项目都将显示或隐藏， 我创建replyboxShowId状态来保存元素的item\u id 你想表现出来

renderRowItem = (itemData) => {
    Moment.locale('en');
    return (
      <View style={styles.commentSection}>
        <View style={{flexDirection:'row'}}>
          <View style={{flex:1,flexDirection:'row'}}>
            <Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
            source={{ uri: this.state.profile_image }} resizeMode='cover' />
            <View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
              <View style={{flexDirection:'row',paddingTop:5}}>
                <Text style={{fontWeight:'600',fontSize:14}}>
                {itemData.item.firstName} {itemData.item.surname}</Text>
                <Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
                {Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
              </View>
              <Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
              {itemData.item.comment}</Text>
              <Text onPress={this.ShowHideTextComponentView.bind(this,itemData.item._id)} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
              Reply</Text>

              <View>
                <FlatList
                  data={itemData.item.replies}
                  keyExtractor={this._keyExtractor}
                  renderItem={this.renderRowReply}
                />
              </View>
              <View>
              {
                this.state.replyBoxShowId === itemData.item._id ?
                <View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
                  <TextInput
                    style = {[styles.inputReplyBox,
                    !this.state.postValidate ? styles.error : null]}
                    placeholder="Enter message here"
                    placeholderTextColor="grey"
                    onChangeText = {reply => this.setState({reply})}
                  />
                  <TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
                  onPress={() => this.replyCom(itemData.item._id)}>
                    <Icon name="paper-plane-o" size={20} color="#F766FF" />
                  </TouchableOpacity>
                </View>
                : null
              }

              </View>

            </View>
          </View>
        </View>
      </View>

    )
  }

---

请添加我上次添加的ShowHideTextComponentView函数代码。请查收，谢谢！请添加我上次添加的ShowHideTextComponentView函数代码。请查收，谢谢！我正在尝试此代码，但出现错误-->>ReferenceError:找不到变量：ShowHideTextComponentViewsame错误？找不到变量：ShowHideTextComponentView？再次检查您的代码，我忘记了“this”。在第一篇文章中。检查本文以了解如何将数据绑定到函数我正在尝试此代码，但出现错误-->>引用错误：找不到变量：ShowHideTextComponentView相同的错误？找不到变量：ShowHideTextComponentView？请再次检查代码，我忘记了第一篇文章中的“this”。查看本文了解如何将数据绑定到函数

renderRowItem = (itemData) => {
    Moment.locale('en');
    return (
      <View style={styles.commentSection}>
        <View style={{flexDirection:'row'}}>
          <View style={{flex:1,flexDirection:'row'}}>
            <Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
            source={{ uri: this.state.profile_image }} resizeMode='cover' />
            <View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
              <View style={{flexDirection:'row',paddingTop:5}}>
                <Text style={{fontWeight:'600',fontSize:14}}>
                {itemData.item.firstName} {itemData.item.surname}</Text>
                <Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
                {Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
              </View>
              <Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
              {itemData.item.comment}</Text>
              <Text onPress={this.ShowHideTextComponentView.bind(this,itemData.item._id)} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
              Reply</Text>

              <View>
                <FlatList
                  data={itemData.item.replies}
                  keyExtractor={this._keyExtractor}
                  renderItem={this.renderRowReply}
                />
              </View>
              <View>
              {
                this.state.replyBoxShowId === itemData.item._id ?
                <View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
                  <TextInput
                    style = {[styles.inputReplyBox,
                    !this.state.postValidate ? styles.error : null]}
                    placeholder="Enter message here"
                    placeholderTextColor="grey"
                    onChangeText = {reply => this.setState({reply})}
                  />
                  <TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
                  onPress={() => this.replyCom(itemData.item._id)}>
                    <Icon name="paper-plane-o" size={20} color="#F766FF" />
                  </TouchableOpacity>
                </View>
                : null
              }

              </View>

            </View>
          </View>
        </View>
      </View>

    )
  }

ShowHideTextComponentView = (id) =>{
   this.setState({
      replyBoxShowId : id
   })
}