Question

我尝试使用react-native-super-grid处理多项选择，这是我的代码：

<GridView
        itemDimension={80}
        items={items}
        style={styles.gridView}
        renderItem={item => ( 
            <View style={[styles.itemContainer , { backgroundColor:' transparent '}]}>
                <TouchableHighlight style={styles.buttonStyle} onPress={() => this.pressEvent() }> 
                  <Text> {item.image}</Text>   
               </TouchableHighlight>
               <Text style={styles.buttonText}> {item.name}</Text> 
          </View>)}
        />

我尝试使用此功能：

    pressEvent(arr){

    if(this.state.pressStatus == false){
      this.setState({ pressStatus: true})  
      this.state.arr.push(arr)
      this.setState({ color : 'white'})
    } else {
      this.setState({ pressStatus: false})
      this.setState({ color: 'red'})
    } 
  }

但它有点不起作用，有人可以帮助我吗？

谢谢。

Answer 1

这个简短的例子可以让你知道你做错了什么。物品本身并不知道状态。那么我会做什么，我会为网格项创建一个单独的子组件，并在本地处理按状态。然后处理parent，它通过关于被按下项目的回调来保存所有项目。

<script type="text/javascript">
    $(document).ready(function() {
        setInterval(function() {
            $('#show').load('php/msa_pauza_refresh.php')
        }, 500);
    });
</script>

GridItem

class MyGridView extends Component {
render() {
    return (
        <GridView
            itemDimension={80}
            items={items}
            style={styles.gridView}
            renderItem={item => (
                <GridItem
                    item={item}
                    onItemPress={selected => {
                        // set grid view callback
                        if (selected) {
                            //if true add to array
                            this.addToPressedArray(item);
                        } else {
                            //false remove from array
                            this.removeFromPressedArray(item);
                        }
                    }}
                />
            )}
        />
    );
}

// You don't change the state directly, you mutate it trough set state
addToPressedArray = item => this.setState(prevState => ({ arr: [...prevState.arr, item] }));

removeFromPressedArray = item => {
    const arr = this.state.arr.remove(item);
    this.setState({ arr });
};
}

我还建议您阅读class GridItem extends Component { // starting local state state = { pressStatus: false, color: 'red' }; // handle on item press pressEvent = () => { this.setState(prevState => ({ pressStatus: !prevState.pressStatus, //negate previous on state value color: !prevState.pressStatus ? 'white' : 'red' //choose corect collor based on pressedStatus })); // call parent callback to notify grid view of item select/deselect this.props.onItemPress(this.state.pressStatus); }; render() { return ( <View style={[styles.itemContainer, { backgroundColor: ' transparent ' }]}> <TouchableHighlight style={styles.buttonStyle} onPress={() => this.pressEvent()}> <Text> {item.image}</Text> </TouchableHighlight> <Text style={styles.buttonText}> {item.name}</Text> </View> ); } } lifecycle。它是一个很好的阅读，让您更好地了解如何实现更新。

Answer 2

由于GridView已合并到FlatGrid中。因此，我以一种非常简单的方式实现了多选选项。首先，我像这样在FlatGrid的renderItems道具的视图顶部应用了TouchableOpacity。

 <TouchableOpacity
        onPress={() => this.selectedServices(item.name)}>
...props
</TouchableOpacity>

SelectedServices：

selectedServices = item => {
let services = this.state.selectedServices;

if (services.includes(item) == false) {
  services.push(item);
  this.setState({ selectedServices: services });

} else {
  let itemIndex = services.indexOf(item);
  services.splice(itemIndex, 1);
  this.setState({ selectedServices: services });

}

};

使用splice，indexOf和push，可以轻松实现多选。

要更改当前所选项目的backgroundColor，可以在视图的backgroundColor道具上进行勾选。

renderItem={({ item, index }) => (
      <TouchableOpacity

        onPress={() => this.selectedServices(item.name)}
      >
        <View
          style={[
            styles.itemContainer,
            {
              backgroundColor: this.state.selectedServices.includes(
                item.name
              )
                ? '#0052cc'
                : item.code
            }
          ]}
        >
          <Text style={styles.itemName}>{item.name}</Text>
        </View>
      </TouchableOpacity>
    )}

在GridView

2 个答案: