Как выбрать несколько значений в плоский список на основе там ключ - PullRequest
Новая
       9

Как выбрать несколько значений в плоский список на основе там ключ

0 голосов
/ 08 февраля 2019

Я использую мощный плоский список реагировать нативной, это мой массив, который выглядит следующим образом: 

data =   [
      {Color:[{'label':'BLUE','value':'10'}, {'label':'RED','value':'11'}]},
      {Size:[{'label':'SMALL','value':'13'},{'label':'BIG','value':'12'}]}
      ]

и вот мой плоский список 

<FlatList data={data}
              numColumns={1}
              keyExtractor={(item, index) => index.toString()}
              extraData={this.state}
              ItemSeparatorComponent={FlatListItemSeparator}
              renderItem={({item, index}) => {
                return(
                <View >
                <Text >{Object.keys(item)}</Text>
                <FlatList data={item[Object.keys(item)]}
                numColumns={5}
                keyExtractor={(index) => "D"+index.toString()}
                extraData={this.state}
                renderItem={({item, index}) => {
                  return(
                        <TouchableOpacity onPress={() => this._handleclick(index, item)} style={[
                            styles.Buttoncolor, this.state.selected == index+item.label
                              ? styles.onfocusbutton
                              : null
                          ]}>
                          <Text style={[styles.textcolor,this.state.selected == index+item.label?styles.white:null]}>{item.label}</Text>
                        </TouchableOpacity>
                        )
                }
                }/>
              </View>)}}/>

это функция, где ясопоставляя индекс элемента .. 

  _handleclick = (index, item) => {
        this.setState({selected: index+item.label, selectedColor: item.value})
      }

вот что я попробовал: ->

Я вызываю функцию щелчка рукой, сопоставляю ее значение с индексом + именем метки, и она сама получает изменения, нокогда я нажимаю на СИНИЙ, он меняет свой цвет, но когда я нажимаю на МАЛЫЙ, он может измениться сам, но синий получает свое прежнее условие

Теперь вот главное, что я хочу сделать: ->

Я хочучтобы выбрать только один элемент на основе этого массива, который является 'Color', я хочу, чтобы, когда я нажимал на СИНИЙ, он мог менять его цвет.и если я нажму также на SMALL, он также может изменить сам цвет, поэтому необходимо сохранить два значения.

Надеюсь, вы легко поймете.спасибо заранее

ОБНОВЛЕНИЕ 1

СОСТОЯНИЕ: РЕШЕНО

Изменения 

_handleclick = (index, item,objectname) => {
         const {selected,result} = this.state
         let selectedIndex = this.state.selected.indexOf(item.value);
            if(selectedIndex == -1){
           let my =   this.state.result.filter((e)=>{return e[objectname]})
             selected.forEach((items) => {
                    let arrayofattribute =   result.filter((e)=>{return e[objectname]})
                    arrayofattribute.forEach((value,index)=>{
                    newval =  value[objectname].map((val,i)=>{
                        if(items == val.label)
                        {
                          selected.splice(selected.indexOf(val.label),1)
                        }
                      })
                    })
             })
            this.setState({selected:[item.label,...this.state.selected]})
          }
      }

в Flatlistрендер 

<TouchableOpacity
                        onPress={() => this._handleCategoryColor(index, item,objectname)}

                        style={[
                          styles.Buttoncolor,

                          this.state.selected.indexOf(item.label) != -1
                            ? styles.onfocusbutton
                            : null,
                        ]}>
                        <Text
                          style={[
                            styles.textcolor,
                            this.state.selected.indexOf(item.label) != -1
                              ? styles.white
                              : null,
                          ]}>
                          {item.label}

                        </Text>
                      </TouchableOpacity>

Ответы [ 3 ]

0 голосов
/ 08 февраля 2019

Возможно, проблема в назначении аргументов функции.Если вы видите, что оба метода renderItem в Flatlist используют renderItem={({item, index}), то последний renderItem может получить доступ к вышеуказанному item, index.Когда onPress вызывает, возникает путаница, какой элемент или индекс поместить в обратный вызов.Пожалуйста, попробуйте добавить разные имена arg.Как 

<FlatList data={data}
   numColumns={1}
   keyExtractor={(item, index) => index.toString()}
   extraData={this.state}
   ItemSeparatorComponent={FlatListItemSeparator}
   renderItem={({item, index}) => {
   return(
     <View >
     <Text >{Object.keys(item)}</Text>
     <FlatList data={item[Object.keys(item)]}
                numColumns={5}
                keyExtractor={(index) => "D"+index.toString()}
                extraData={this.state}
                renderItem={({set, key}) => {
                  return(
                        <TouchableOpacity onPress={() => this._handleclick(key, set)} style={[
                            styles.Buttoncolor, this.state.selected == index+item.label
                              ? styles.onfocusbutton
                              : null
                          ]}>
                          <Text style={[styles.textcolor,this.state.selected == index+item.label?styles.white:null]}>{item.label}</Text>
                        </TouchableOpacity>
                        )
                }
                }/>
              </View>)}}/>

Дайте мне знать, если это решит вашу проблему.Удачного кодирования.:)

0 голосов
/ 08 февраля 2019

Если я правильно понял, вам нужно выбрать только один вариант для каждого свойства (цвета и размеры).Поэтому вам нужно иметь поле в вашем состоянии для каждого элемента, который вы хотите сохранить.

Ваша _handleClick функция может выглядеть примерно так: 

_handleclick = (index, item) => {
  const { Color } = this.state.data[0];
  const { Size } = this.state.data[1];
  this.setState(state => ({
    selectedColor: Color.find(color => color.label === item.label)
      ? index + item.label
      : state.selectedColor,
    selectedSize: Size.find(size => size.label === item.label)
      ? index + item.label
      : state.selectedSize,
  }));
};

Каждый раз, когда вы нажимаете наэлемент, который нужно знать, цвет это или размер, а затем правильно обновить правильное поле.Возможно, это не самый эффективный способ, но он работает.

Затем, в вашем методе рендеринга, чтобы назначить стиль, вы можете проверить оба условия: 

<TouchableOpacity
  onPress={() => this._handleclick(index, item)}
  style={[
    styles.Buttoncolor,
    this.state.selectedSize == index + item.label ||
    this.state.selectedColor == index + item.label
      ? styles.onfocusbutton
      : null,
  ]}>
  <Text
    style={[
      styles.textcolor,
      this.state.selectedSize == index + item.label ||
      this.state.selectedColor == index + item.label
        ? styles.white
        : null,
    ]}>
    {item.label}
  </Text>
</TouchableOpacity>

Я пытался воспроизвестиВаш вопрос в эта закуска , вы можете посмотреть.

0 голосов
/ 08 февраля 2019

вы можете попробовать массив вместо хранения одного выбранного элемента,

сделать выбранное состояние пустым массивом при объявлении. 

...
<TouchableOpacity onPress={() => this._handleclick(index, item)} style={[
                            styles.Buttoncolor, this.state.selected.indexOf(index+item.label) != -1
                              ? styles.onfocusbutton
                              : null
]}>
    <Text style={[styles.textcolor, this.state.selected.indexOf(index+item.label) != -1?styles.white:null]}>{item.label}</Text>
</TouchableOpacity>

здесь вы обрабатываете метод, нажимаете новый выбранный элементв выбранный массив 

_handleclick = (index, item) => {
        let selectedIndex = this.state.selected.indexOf(index+item.label);
        if(selectedIndex== -1){
          this.setState({selected: [...this.state.selected,index+item.label], selectedColor: item.value})
        }

      }
...