React Native 复选框元素不起作用

Question

我正在使用来自 react-native-elements 的复选框。我遇到复选框选中值的问题。

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

姓名
密钥

对于一个实例：{name:'Events', selected:'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 });

}

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

我没有从数据库中获取 ID，只获取名称和 selected 值，所以我在 togglecheckmethod 中使用了名称。

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 复选框元素不起作用

React Native checkbox element is not working

checkbox

react-native

react-native-elements