App.js

Question

如果selectAll复选框为true，如何轻触所有其他复选框，并且如果点击了其他任何一个复选框，如何取消选择selectAll复选框？

请查看代码here。

先谢谢您

App.js

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

CheckBox组件

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

Answer 1

我建议您从passedCheckValue文件中传递App.js，您的CheckBoxComponent只会呈现passedCheckValue，无论我们将传递给它什么。

假设值是：this.props.passedCheckValue

然后只需添加

componentDidMount(){
   this.setState({ checkValue: this.props.passedCheckValue})
}

Answer 2

我通过检查checkbox的ID是否包含在selectedBoxes数组中来解决它？

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

  valueChange = checkAll => {
    this.setState({
      checkAll,
    });
    this.onUpdateAll(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);
        if (data.data.length === this.state.selectedBoxes.length) {
          this.setState({
            checkAll: true,
          });
        } else {
          this.setState({
            checkAll: false,
          });
        }
      }
    );
  };

  onUpdateAll = checkAll => {
    let allSelectedArray = [];
    if (checkAll) {
      data.data.map((item, index) => {
        allSelectedArray.push(item.id);
      });
      this.setState(
        {
          selectedBoxes: allSelectedArray,
        },
        () => console.log('bcd', this.state.selectedBoxes)
      );
    } else {
      this.setState(
        {
          selectedBoxes: allSelectedArray,
        },
        () => console.log('cde', this.state.selectedBoxes)
      );
    }
  };

  render() {
    const { checkAll, selectedBoxes } = 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)}
              selectedBoxes={selectedBoxes}
              id={item.id}
            />
          );
        })}
      </View>
    );
  }
}

CheckBoxComponent.js

class CheckBoxComponent extends React.Component{

    valueChange = (check) => {
      this.props.onUpdate();
    }

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

Answer 3

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

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

复选框组件

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;

希望这对您有所帮助。放心怀疑。

选择所有复选框组-本机反应

App.js

CheckBox组件

3 个答案: