React native 在GridView中处理Multiselect_React Native

React native 在GridView中处理Multiselect

react-native

React native 在GridView中处理Multiselect,react-native,React Native,我正在尝试使用react native super grid处理多选，以下是我的代码： <GridView itemDimension={80} items={items} style={styles.gridView} renderItem={item => ( <View style={[styles.itemContainer , { backgroundColor:' transp

我正在尝试使用

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>)}
        />

但不知怎的它不起作用，有人能帮我吗

谢谢。

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

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 });
};
}

类MyGridView扩展组件{ render（）{ 返回( ( { //设置网格视图回调如果（选定）{ //如果为true，则添加到数组此.addToPressedArray（项目）； }否则{ //从数组中移除错误此。从冲压阵列（项目）中移除； } }} /> )} /> ); } //您不直接更改状态，而是通过设置状态对其进行变异 addToPressedArray=item=>this.setState（prevState=>（{arr:[…prevState.arr，item]}））； removeFromPressedArray=项目=>{ const arr=this.state.arr.remove（项目）； 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>
    );
}
}

类GridItem扩展组件{
//启动本地状态
状态={
按状态：false，
颜色：“红色”
};
//物品压榨手柄
按事件=（）=>{
this.setState（prevState=>({
pressStatus:！prevState.pressStatus，//否定先前的状态值
颜色：！prevState.pressStatus？白色：'红色'//根据pressedStatus选择corect collor
}));
//调用父回调以通知网格视图项选择/取消选择
this.props.onimpress（this.state.pressStatus）；
};
render（）{
返回(
this.pressEvent（）}>
{item.image}
{item.name}
);
}
}

我还建议阅读关于

React.Component

。这是一本很好的读物，让你更好地理解如何实现更新。

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

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>
    );
}
}

类GridItem扩展组件{
//启动本地状态
状态={
按状态：false，
颜色：“红色”
};
//物品压榨手柄
按事件=（）=>{
this.setState（prevState=>({
pressStatus:！prevState.pressStatus，//否定先前的状态值
颜色：！prevState.pressStatus？白色：'红色'//根据pressedStatus选择corect collor
}));
//调用父回调以通知网格视图项选择/取消选择
this.props.onimpress（this.state.pressStatus）；
};
render（）{
返回(
this.pressEvent（）}>
{item.image}
{item.name}
);
}
}

我还建议阅读关于

React.Component

。这是一本很好的读物，让您更好地理解如何实现更新。

因为GridView已合并到FlatGrid中。因此，我以一种非常简单的方式实现了multi-select选项。首先，我在FlatGrid的renderItems道具中的视图顶部应用了TouchableOpacity，如下所示

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

})

使用splice、indexOf和push，您可以轻松实现多重选择

要更改当前选定项目的背景色，可以在视图的背景色道具上应用检查

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>
    )}

renderItem={（{item，index}）=>(
this.selectedServices（item.name）}
>
{item.name}
)}

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

})

使用splice、indexOf和push，您可以轻松实现多重选择

要更改当前选定项目的背景色，可以在视图的背景色道具上应用检查

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>
    )}

renderItem={（{item，index}）=>(
this.selectedServices（item.name）}
>
{item.name}
)}

你所说的“不工作”是什么意思好吧，当我在GridView中单击按钮时，它的颜色应该是白色的，但按钮的颜色没有改变，当我尝试使用警报时，它似乎工作得很好你所说的“不工作”是什么意思好吧，当我在GridView中单击按钮时，它的颜色应该是白色的，但是按钮的颜色没有改变，当我尝试使用警报时，似乎函数工作得很好。我收到一个错误，因为未定义的不是对象（计算“\u this.state.arr.remove”）@Jes您需要将函数绑定到您的c