反应本机元素复选框选择多个项目

Question

所以我正在做一个项目，在这个项目中我使用了 React Native Elements 复选框，我终于让它在没有 select 所有获取的项目的地方工作。它一次只能 select 一次，如果我尝试 select 另一个项目，它将取消 select 第一个项目和 select 第二个项目。但现在它不允许我一次 select 多个项目。我在这个平台上搜索了 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 中选中的行。我试过 checked={!!item.checked} 但它不起作用。我试过 checked={!this.state.checked} 但这也不起作用。有没有人遇到过这个问题，如果遇到过，你是怎么解决的？

Answer 1

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

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

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

这应该可以解决问题或有多个 selection。

反应本机元素复选框选择多个项目

React native elements checkbox selecting multiple items

checkbox

react-native

react-native-elements