时间戳

首页 > 解决方案 > 如何使用未知数量的复选框控制复选框“选中”值

javascript - 如何使用未知数量的复选框控制复选框“选中”值

问题描述

所以我有一个屏幕，我根据列表大小呈现未知数量的复选框。如何控制这些框的“选中”值？
我将 react-native-elements 用于复选框。

复选框的渲染方法： 

    _showChoices = (list) => {
        return list.map((item, i) => {
            return (
                <CheckBox
                title={item.choice_name}
                checked={}
                size={25}
                onIconPress={() => {}}
                onPress={() => {}}
                key={item.choice_id}
                />
            )
        })
    }

如果您需要更多信息，请发表评论。

谢谢！

标签： javascriptreact-nativecheckboxstate

解决方案

您可以在每个项目中添加 isChecked 属性并按下复选框。您可以更新 isChecked 属性。

this.state = {
 list = [
   { choice_id: 12, choice_name:"bluetooth", isChecked: false},
   { choice_id: 23, choice_name:"wifi", isChecked: false},
   { choice_id: 34, choice_name:"hotspot", isChecked: false},
]
 
}

_showChoices = (this.state.list) => {
        return list.map((item, i) => {
            return (
                <CheckBox
                  title={item.choice_name}
                  checked={item.isChecked}
                  size={25}
                  onIconPress={() => {}}
                  onPress={() => {
                    let clonedList = this.state.list.slice();
                    clonedList[i].isChecked = !clonedList[i].isChecked
                    this.setState({list: clonedList})}}
                  }
                  key={item.choice_id}
                />
            )
        })
    }

推荐阅读