如何在平面列表中隐藏/显示文本输入反应原生？

Question

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

这是我的平面列表：

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

这里是渲染行项：

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} 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.replyboxShow ?
                <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 = () =>{
    if(this.state.replyboxShow == true){
      this.setState({replyboxShow: false})
    }else{
      this.setState({replyboxShow: true})
    }
  }

Answer 1

在您的回复框显示状态下，所有项目都将显示或隐藏， 我创建一个replyboxShowId 状态来保存元素的item_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 = (id) =>{
   this.setState({
      replyBoxShowId : id
   })
}