홈>2020-02-26 10:58

기본 요소 반응 선택한 ListItem 스타일 처리

코드를 수정하여 질문을 다시 게시합니다. 항목 목록에서 선택한 항목에 대해 특정 스타일을 설정해야합니다. 내 코드는 :

constructor (props) {
    super(props)
    this.state = {
      selectedIndex: null
    }
  }
<FlatList
                data={this.state.data}
                renderItem={({ item, index }) => (
                  <ListItem
                    leftAvatar={{ source: { uri: item.avatar } }}
                    title={`${item.firstName} ${item.lastName}`}
                    // subtitle={item.email}
                    chevron
                    onPress={() => {
                      this.setState({
                        selectedIndex: index
                      })
                      console.log('####################')
                      console.log(this.state.selectedIndex)
                      console.log(index)
                      console.log('####################')
                    }}
                    containerStyle={
                      this.state.selectedIndex === index
                        ? styles.active
                        : styles.inactive
                    }
                  />
                )}
                keyExtractor={item => item.email}
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderHeader}
              />

콘솔에서 테스트했을 때 그 값을 얻었습니다 :

####################
####################
2
3
####################
####################
3
0
####################
####################
0
1
####################
####################
1
2
####################
####################
2
3
####################
####################
3
4
####################
####################
4
5
####################
####################
5
6
####################
####################
6
3
####################
####################
3
3
####################
####################
3
3
####################
####################
3
3
####################
####################
3
2
####################
####################
2
2
####################

항목을 누를 때 selectedIndex 상태가 색인 값을 얻었지만 구성 요소가 다시 렌더링되지 않는 스타일을 편집 할 수 없습니다.

내 스타일은 :

const styles = StyleSheet.create({
  active: {
    backgroundColor: 'green'
  },
  inactive: {
    backgroundColor: 'grey'
  }
})

selectedIndex가 index와 같지만 작동하지 않는 경우 활성 클래스를 적용해야합니다

react-native

답변 # 1
this.state.selectedIndex 를 추가해야합니다 extraData 에 FlatList 의 컴포넌트를 다시 렌더링합니다.
```
<FlatList
    data={this.state.data}
    renderItem={({ item, index }) => (...)}
    extraData={this.state.selectedIndex}
/>
```
참조 용 문서를 참조하십시오.

답변 # 2
플랫리스트에서 setState를 자체 함수로 추출하려고 시도했습니다. 나는 onPress 내부에서 setState를 호출하지 않을 것입니다 (스포일러 : 비동기 함수입니다).

setState 호출은 동 기적이지 않습니다. "보류 상태 전환"을 만듭니다. 발생한 이벤트의 일부로 새 입력 값을 명시 적으로 전달해야합니다.

setIndex라는 새로운 함수를 만들고 로직을 넣었습니다.
```
setIndex = async (index) => {
  await this.setState({
    selectedIndex: index
})
```
그리고 onPress에서 사용하십시오 :
```
onPress={() => setIndex(index)}
```

Python2.net

기본 요소 반응 선택한 ListItem 스타일 처리

관련 자료