Как скрыть / показать ввод текста в плоский список реагировать родной?

Question

Я новичок в реагировании на родной язык, и мне нужно показать и скрыть для ввода текста в каждом варианте ответа на комментарий. Как уникально каждый раздел, чтобы я мог скрывать и отображать ввод текста для каждого нажатия кнопки.

Вот мой плоский список:

<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

С вашим состоянием replyboxShow все элементы будут отображаться или скрываться, я создаю состояние 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:

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