反应原生元素复选框选择多个项目

Question

所以我正在做一个项目，我正在使用反应原生元素复选框，我终于让它工作，它不会一次选择所有获取的项目。它一次只选择一个，如果我尝试选择另一个项目，它将取消选择第一个项目并选择第二个项目。但现在它不允许我一次选择多个项目。我在这个平台上搜索了google，也搜索了reddit，我找不到任何解决方案。

这是我的代码

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 中选中的行。我试图检查={!!item.checked} 但它不起作用。我试过 check={!this.state.checked} 这也不起作用。有没有人遇到过这个问题，如果有，您是如何解决的？

Answer 1

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

首先，你需要修改你的构造函数

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

现在让我们更新你的渲染函数

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

这应该可以解决问题或多选。