React Native中有数组时如何选中复选框？答案

【问题标题】：How to check checkbox when there is an array in React Native?React Native中有数组时如何选中复选框？
【发布时间】：2018-07-02 20:03:23
【问题描述】：

我想使用复选框来检查朋友。但我不太确定我将如何实现它，希望有人能帮助我。

这是我的状态：

state = {checked: false}

这是我要映射数组的地方

{this.props.navigation.getParam('friends').map((name, key) => (
<View>
  <Text>{name}</Text>
  <CheckBox 
    checked={this.state.checked}
    onPress={(val)=>{}}
  />
</View>))}

注意： 或者有人可以在snack.expo.io 中给我写一个应用程序/代码sn-p 如何仅获取选中的复选框值

【问题讨论】：

标签： react-native checkbox mapping

【解决方案1】：

你可以编写一个自定义的复选框组件

    export default class CustomCheckbox extends Component {
      constructor(props) {
        super(props);
        this.state = {
          checked: false,
        };
      }
      toggleChange(){
        this.setState({checked: !this.state.checked});
      }
      render() {
        return (
         <View>
      <Text>{this.props.name}</Text>
      <CheckBox 
        checked={this.state.checked}
        onPress={() =>  this.bind.toggleChange(this)}
      />
    </View>
        );
      }
    }

并导入您的 CustomCheckbox 组件

    import CustomCheckbox from "your CustomCheckbox.js path"

    {this.props.navigation.getParam('friends').map((name, key) => (
    <View>
      <CustomCheckbox name={name} />
    </View>
    ))}

【讨论】：

上面写着：undefined is not an object ('evaluating _this2.bind.toggleChange')
onPress={()=> this.toggleChange()}谢谢

【解决方案2】：

您的代码运行良好，您只需要稍微更新一下。您有以下两种选择：

你朋友的数组应该检查每个包含对象中的键，然后你可以简单地做这样的事情。

{
this.props.navigation.getParam('friends').map((item, key) => (
let {name, checked} = item // item is an object from friends array,the  and it have name, checked and other keys
<View>
  <Text>{name}</Text>
  <CheckBox 
    checked={checked}
    onPress={(val)=>{}}
  />
</View>))
}

还有就是你把人名保存为key，true/false保存为checked状态，例如：

toggleCurrentFirendState = (item)=>{
   this.setState((prevState)=>{
       let {name} = item  //get name from clicked friend from the list
       return {
           ...prevState,  //used spread operator, so that other states doesn't get mutat.
          [name]:!prevState[name] //toogle state of clicked item
       }
   })
}

//within your render
{
this.props.navigation.getParam('friends').map((item, key) => (
let {name} = item // item is an object from friends array,the  and it have name, checked and other keys
<View>
  <Text>{name}</Text>
  <CheckBox 
    checked={name ===this.state[name]}  //see change
    onPress={(val)=>{this.toggleCurrentFirendState(item)}}
  />
</View>))
}

【讨论】：

解析错误：出现意外标记：let {name} = item
在该行之前尝试 console.log(item)
控制台显示好友姓名，表示物品有价值
好吧，你在 ES5 上，用 var name = item.name 替换 let {name}
我在snack.expo.io上写文章