Question

我正在使用react-native-elements中的复选框。我面临复选框检查值的问题。

首先，我必须从数据库中获取数据。我得到带有两个键和值的首选项数组，例如：

名称
键

对于一个实例：{name：'Events'，选择：'true'}

现在，我正在从数据库中检索名称值，并为我的复选框设置该名称，它工作正常。我的复选框已选中按钮有问题。

这是我的复选框：

 <CheckBox
 key={index}
 name={x.name}
checked={this.state.checked}
checkedIcon={<Image source={require('../../assets/icons/checkmark.png')} style={{ height: 20, width: 20 }} />}
uncheckedIcon={<Image source={require('../../assets/icons/check-box.png')} style={{ height: 20, width: 20 }} />}
onPress={() => this.toggleCheckbox(x.name)}/>

这是我的toggleCheckbox方法：

toggleCheckbox(name) {

    console.log("NAME===", name);

    const changeCheckbox = this.state.filterCategoryName.find((cb) => cb.name === name);
    changeCheckbox.selected = !changeCheckbox.selected;

    if (changeCheckbox.selected) {
        console.log("Checked  if ====", changeCheckbox.selected);
        this.setState({ checked: changeCheckbox.selected })
        console.log("State updating during true====", this.state.checked);
    }
    else {
        console.log("Checked else ====", changeCheckbox.selected);
        this.setState({ checked: changeCheckbox.selected })
        console.log("State updating during false===", this.state.checked);
    }

    const checkboxes = Object.assign({}, this.state.filterCategoryName, changeCheckbox);
    this.setState({ checkboxes });

}

那时我选中一个复选框，它将选择所有复选框，而不是单个复选框；而当我取消选中单个复选框时，它将取消选中所有复选框。

我不是从数据库中获取ID，而只是获得名称和所选值，因此我在togglecheck方法中使用了名称。

Answer 1

您有一个共同的价值观要保持检查，那就是为什么所有内容都得到更新

您可以执行以下操作。

假设这是您的数据数组：this.state.filterCategoryName

<CheckBox
 key={index}
 name={x.name}
checked={x.selected}
checkedIcon={<Image source={require('../../assets/icons/checkmark.png')} style={{ height: 20, width: 20 }} />}
uncheckedIcon={<Image source={require('../../assets/icons/check-box.png')} style={{ height: 20, width: 20 }} />}
onPress={() => this.toggleCheckbox(x.name)}/>

您可以更新状态为数组而不是检查值

toggleCheckbox(name) {

    console.log("NAME===", name);
     
    const updatedArray= [...this.state.filterCategoryName];
    const changeCheckbox = updatedArray.find((cb) => cb.name === name);
    changeCheckbox.selected = !changeCheckbox.selected;

    this.setState({ filterCategoryName :updatedArray});

}

这将简单地将所有内容维护在同一数组中。

React Native复选框元素不起作用

1 个答案: