选择所有复选框组 - 反应原生 [英] Select all the checkbox group - react native

问题描述

如果 selectAll 复选框为真，并且如果点击其他复选框中的任何一个，您如何选择所有复选框，如何取消选择 selectAll 复选框?

How can you make select all the checkboxes if selectAll checkbox is true and if any one of the other checkbox is tapped, how to unselect the selectAll checkbox?

请在此处查看代码.

先谢谢你.

const data = {
  status: true,
  data: [
    {
      id: 1
    },
    {
      id: 2
    }
  ]
};

export default class App extends React.Component {
  state = {
    selectedBoxes: [],
    checkAll: false,
  };

  valueChange = checkAll => {
    this.setState({
      checkAll,
    });
  };

  onUpdate = (id) => {
    this.setState(previous => {
      let selectedBoxes = previous.selectedBoxes;
      let index = selectedBoxes.indexOf(id);
      if (index === -1) {
        selectedBoxes.push(id) 
      } else {
        selectedBoxes.splice(index, 1) 
      }
      return { selectedBoxes }; 
    }, () => console.log('abc', this.state.selectedBoxes)); 
  }

  render() {
    const { checkAll } = this.state;
    return (
      <View>
        <View style={{ flexDirection: 'row' }}>
          <CheckBox
            onValueChange={check => this.valueChange(check)}
            value={this.state.checkAll}
          />
          <Text> Select All</Text>
        </View>
        {data.data.map((item, index) => {
          return <CheckBoxComponent index={index +1} onUpdate={this.onUpdate.bind(this, item.id)} />;
        })}
      </View>
    );
  }
}

复选框组件

export default class CheckBoxComponent extends React.Component{
    state = {
      checkValue: false
    }

    valueChange = (check) => {
      this.setState({ checkValue: !this.state.checkValue})
      this.props.onUpdate();
    }

    render() {
      const { checkAll } = this.props;
        return (
          <View style={{ flexDirection: 'row'}}>
            <CheckBox
              onValueChange={(check) => this.valueChange(check)}
              value={this.state.checkValue}
            />
            <Text> {this.props.index}</Text>
          </View>
        );
    }
}

推荐答案

查看我根据您的要求修改的完整示例

Check this complete example which I modified according to your requirements

App.js

import React from "react";
import { Text, View, CheckBox } from "react-native";
import CheckBoxComponent from "./components/CheckBoxComponent";

const data = {
  status: true,
  data: [
    {
      id: 1,
      name: "Bill Gates",
      roll: 101
    },
    {
      id: 2,
      name: "Steve Jobs",
      roll: 102
    },
    {
      id: 3,
      name: "Linus Torvalds",
      roll: 103
    }
  ]
};

export default class App extends React.Component {
  state = {
    selectedBoxes: []
  };

  valueChange = () => {
    this.setState({
      selectedBoxes: this.state.selectedBoxes.length != data.data.length ? data.data.map(item => item.id) : []
    });
  };

  onUpdate = id => {
    this.setState(previous => {
      let selectedBoxes = previous.selectedBoxes;
      let index = selectedBoxes.indexOf(id);
      if (index === -1) {
        selectedBoxes.push(id);
      } else {
        selectedBoxes.splice(index, 1);
      }
      return { selectedBoxes };
    });
  };

  render() {
    const { selectedBoxes } = this.state;
    return (
      <View>
        <View style={{ flexDirection: "row" }}>
          <CheckBox
            onValueChange={this.valueChange}
            value={selectedBoxes.length == data.data.length}
          />
          <Text> Select All</Text>
        </View>
        {data.data.map((item, index) => (
          <CheckBoxComponent
            index={index + 1}
            onUpdate={() => this.onUpdate(item.id)}
            isChecked={!!selectedBoxes.find(obj => obj == item.id)}
          />
        ))}
      </View>
    );
  }
}

CheckBox 组件

import React from "react";
import { View, Text, CheckBox } from "react-native";

class CheckBoxComponent extends React.Component {
  render() {
    const { index, isChecked, onUpdate } = this.props;
    return (
      <View style={{ flexDirection: "row" }}>
        <CheckBox 
          onValueChange={() => onUpdate(index)} 
          value={isChecked} 
        />
        <Text> {index}</Text>
      </View>
    );
  }
}

export default CheckBoxComponent;

希望对你有帮助.如有疑问，请随意.

Hope this helps you. Feel free for doubts.

这篇关于选择所有复选框组 - 反应原生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！