javascript - 具有独立状态的动态生成的复选框 React-Native

Question

我有正在生成的产品列表，每个产品都有一个与之关联的复选框。现在我所有的复选框都共享相同的状态，所以当你选中一个时，所有的复选框最终都会被选中。包括复选框在内的产品数据在循环中，如何生成具有不同状态的复选框？我正在使用 React Native 和复选框组件正在使用 react-native-elements

      <View>
        {products.map((value, key) => {
          return (
            <View
              key={value.serialNumber + key}
              style={localStyles.productCheckbox}
            >
              <Text key={value._id + key} style={localStyles.modalText}>
                {value.pModel}
              </Text>
              <Text
                key={value.pModel + key}
                style={localStyles.modalText}
              >
                {value.serialNumber}
              </Text>
              <Text
                key={value.pVersion + key}
                style={localStyles.modalText}
              >
                {value.versionNumber}
              </Text>
              <CheckBox
                checked={this.state.checked}
                onPress={() => {
                  this.setState({ checked: !this.state.checked });
                }}
                key={value._id}
              />
            </View>

Answer 1

不使用 bool 值，而是使用一个数组来存储所有选中项目的 ID。

像这样:

this.state = {
   ....
   checked: [],
   ....
}

现在为每个复选框检查它的 id 是否存在于 not 数组中:

<CheckBox
   checked={this.state.checked.includes(value._id)}

更新 onPress 事件处理程序中的状态数组:

onPress={(e) => this.handleCheckbox(value._id, e)}

handleCheckbox(id, e) {

    // check whether item is checked or unchecked on the basis of add and remove

    if (/* checked */) {
        this.setState((prevstate) => ({
            checked: [...prevState.checked, id]
        }))
    } else {
        this.setState((prevstate) => ({
            checked: prevState.checked.filter(el => el != id)
        }))
    }
}