создать массив для изменения цвета одного элемента за раз - PullRequest
Новая
       6

создать массив для изменения цвета одного элемента за раз

0 голосов
/ 03 февраля 2020

Я создал функцию like, которая меняет цвет только для одного элемента, и этот элемент в соответствии с его идентификатором нравится, однако, когда мне нравится первый элемент, передается его идентификатор, но все значки также поворачиваются на красный, как мне отменить это?

моя функция «Мне нравится» выглядит следующим образом: 

onButtonPress = async(item) => {
    console.log(item)
    console.log(this.state.buttonColor,'hello')
    if(this.state.buttonColor='white'){
    try {
      const response = await fetch("some url"+item._id);
      const resJson = await response.text();
      this.setState({

        buttonColor:'red',

      }, console.log(resJson),
      console.log(this.state.buttonColor,'hi'));
    }
    catch (error) {
      console.error(error);
    }
  }

  };

Я вызвал эту функцию в плоском списке в виде значка, я поделюсь фрагментом кода значок ниже: 

  <TouchableOpacity
                 onPress= {() => this.onButtonPress(item)}
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon
                  name="heart"
                  size={30}
                  color={this.state.buttonColor}

                />
              </TouchableOpacity>

Сделайте, скажите мне, если вам требуется что-то еще, и дайте мне знать, как это сделать?

Ответы [ 3 ]

2 голосов
/ 03 февраля 2020

Объявление нового имени состояния ItemId

Назначение элемента в состояние ItemId, которое происходит из метода this.onButtonPress (item), поскольку каждый значок имеет уникальный идентификатор, поэтому

Код выглядит так: 

             <Icon
                  name="heart"
                  size={30}
                  color={this.stateItemId==IconId?.this.state.buttonColor:'White'}    
                />
1 голос
/ 03 февраля 2020

Вам необходимо сохранить идентификатор элемента состояния, который имеет активное состояние (красный цвет). 

onButtonPress = async(item) => {
    if(!this.state.likedItemIds.includes(item._id)){
       try {
         const response = await fetch("some url"+item._id);
         const resJson = await response.text();
         this.setState(prevState => ({
           likedItemIds: [...prevState.likedItemIds, item._id]
         }))
       }
       catch (error) {
         console.error(error);
       }
    }
};

<TouchableOpacity
 onPress= {() => this.onButtonPress(item)}
  style={{
    alignItems: 'center',
    borderRadius: 60,
    padding: 10,
  }}>
  <Icon
    name="heart"
    size={30}
    color={state.likedItemIds.includes(item._id) ? "red" : "white"}
  />
</TouchableOpacity>
0 голосов
/ 03 февраля 2020

Это будет применяться ко всем остальным, потому что вы не манипулируете идентификаторами.

Попробуйте сделать это по идентификаторам или индексам. Flatlist render fun c предоставляет вам индекс для этого.

...