Question

我想使用复选框来获取选中的朋友。但是我不太确定我将如何实现它，希望有人可以帮助我。

这是我的状态：

state = {checked: false}

这是我要映射数组的地方

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

注意：或有人可以在Snake.expo.io中为我编写一个应用程序/代码段，如何仅获取已选中的复选框值

Answer 1

您的代码非常不错，只需更新一下即可。您有以下两种选择：

您朋友的数组应该在每个包含的对象中都选中了键，然后您可以简单地执行以下操作。

{
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>))
}

其他是您将人物姓名保存为键，将true / false保存为选中状态，例如：

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>))
}

Answer 2

您可以编写自定义复选框组件

    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>
    ))}

当React Native中有一个数组时，如何勾选复选框？

2 个答案: