反应本机元素复选框选择多个项目 [英] React native elements checkbox selecting multiple items

问题描述

因此，我正在一个项目中使用反应本机元素"复选框，最后我在不选择所有提取项的情况下使它工作.它一次只能选择一个，如果我尝试选择另一个项目，它将取消选择第一个项目，然后选择第二个项目.但是现在，它不允许我一次选择多个项目.我已经在这个平台上搜索了google，并且也进行了reddit的搜索，我找不到任何解决方案.

So I am working on a project where I am using react native elements checkbox and I finally got it working where it does not select all of the fetched items at one. It only selects one time at a time, and if I try to select another item it will unselect the first item and select the second. But now it will not allow me to select multiple items at once. I have searched google, on this platform, and also reddit and I can not find any solutions.

这是我的代码

constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            checked: null,
        }
    }

    render() {

        const  { navigation } = this.props;
        const cust = navigation.getParam('food', 'No-User');
        const other_param = navigation.getParam('otherParam', 'No-User');
        const cust1 = JSON.parse(cust);
    
        const data = cust1;
        console.log(data);

        return (
            <View style={styles.container}>
                <BackButtonMGMT navigation={this.props.navigation} />

                <FlatList
                    data={data}
                    extraData={this.state}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({ item, index }) => (
                        <CheckBox
                        center 
                        titleProps={{ color: 'black', fontWeight: 'bold'}}
                        title={item}
                        iconRight
                        checked={this.state.checked == item}
                        size={30}
                        onPress={() => this.setState({checked: item})}
                        containerStyle={styles.checkBox}
                        />
                        
                    )}
                />

            </View>
        )
    }

我尝试更改CheckBox中的选中行.我已经尝试过check = {!! item.checked}，但是它不起作用.我已经尝试过check = {！this.state.checked}，但这也不起作用.有没有人遇到过这个问题，如果可以的话，您是如何解决的?

I have tried to change the checked line within the CheckBox. I have tried to checked={!!item.checked} and it does not work. I have tried checked={!this.state.checked} and this does not work either. Has anyone came across this problem, and if so how did you solve this?

推荐答案

现在，您的状态有一个参数 checked ，用于存储项目的选中状态.这意味着每次您选择另一个复选框时，先前的选择都会丢失.要允许多个选择，我们必须管理一个复选框状态数组.这可以通过不同的方法来实现，这是我建议的方法

Right now your state have one parameter, checked, which stores the checked state of an item. That means every time you select another checkbox, the previous selection will be lost. To allow multiple selects we must manage an array of checkbox state. This could be achieved by different approaches, here is the approach I would suggest

首先，您需要修改构造函数

First, you need to modify your constructor

constructor(props) {
  super(props);
  const  { navigation } = props;
  const cust = navigation.getParam('food', 'No-User');
  const other_param = navigation.getParam('otherParam', 'No-User');
  const cust1 = JSON.parse(cust);
  //Here we will make array of object with additional parameter, checked
  //This assume cust1 will be ["Pecan Cookies", "Strawberry Cheesecake"]
  const data = cust1.map(item=>({label:item, checked:false});
  this.state = {
    dataSource: [],
    data,
    checked: null,
  }
}

现在让我们更新渲染功能

Now let's update your render function

onChecked = (index) => {
  let {data} = this.state;
  data[index].checked = !data[index].checked;
  this.setState({data})
}
render() {
const { data} = this.state;
return (
<View style={styles.container}>
  <BackButtonMGMT navigation={this.props.navigation} />

  <FlatList data={data} extraData={this.state} keyExtractor={(item, index)=> index.toString()}
    renderItem={({ item, index }) => (
    <CheckBox center titleProps={{ color: 'black', fontWeight: 'bold'}} title={item.label} iconRight
      checked={item.checked} size={30} onPress={()=>this.onChecked(index)}
      containerStyle={styles.checkBox}
      />

      )}
      />

</View>
)
}

这应该可以解决问题或选择多项.

This should solve the problem or having multiple selection.

这篇关于反应本机元素复选框选择多个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！