Question

如果数据不是首选项，如何取消选中所有复选框？我不知道如何处理数据。

这是index.js：

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

import { Colors } from '../../../themes/';

import style          from "./style";

class CCheckBox extends React.Component {

  /////////////////////////////
    // constructor()
    /////////////////////////////
  constructor(props, context) {
    super(props, context);
    console.log('custom/ccheckbox/index.js constructor()');
    this.state = {
      checked: false,
    };
  }

  /////////////////////////////
    // handleCheck()
    /////////////////////////////
  handleCheck() {
    this.setState({ selectedCheckbox }); // update selected item
         }

     render() {

    return (
      <CheckBox
        iconType='material'
        checkedIcon='check'
        uncheckedIcon='check-box-outline-blank'
        checkedColor={Colors.ORANGE}
        checked={this.state.checked}
        containerStyle={style.content}
        onPress={() => this.handleCheck()}
      />
    );
    }
    }

    export default CCheckBox;

这是我的profalcoholpref.js：

import React, { Component } from "react";
import { ScrollView, View } from 'react-native';
import { Content } from 'native-base';
import CButton        from '../cbutton/index';
import PopSelectList  from './popselectlist';

import styleC         from "../../common/style";
import style          from "./style";

class PopAlcoholPref extends React.Component {

  ///////////////////////////////
    // constructor()
  ///////////////////////////////
  constructor(props, context) {
    super(props, context);
    console.log('custom/cfield/popalcoholpref.js constructor()');
    this.state = {
      selectedCheckbox: {},
      visible: this.props.visible,
      data: [
        {
          id          : 1,
          code        : 'DON',
          description : 'Do not drink',
        },
        {
          id          : 2,
          code        : 'INF',
          description : 'Infrequently',
        },
        {
          id          : 3,
          code        : 'SOC',
          description : 'Socially',
        },
        {
          id          : 4,
          code        : 'MOD',
          description : 'Moderately',
        },
        {
          id          : 5,
          code        : 'ASN',
          description : 'As Needed',
        },
        {
          id          : 5,
          code        : 'NOP',
          description : 'No Preference',
        },
      ]
    };

  }

  ///////////////////////////////
    // componentWillReceiveProps()
  ///////////////////////////////
  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps()');
    this.setState({
      visible: nextProps.visible
    });
  }

  ///////////////////////////////
    // handleSave()
  ///////////////////////////////
  handleSave() {
    console.log('handleSave()');
    this.setState({
      visible: false
    });
  }

  ///////////////////////////////
    // render()
  ///////////////////////////////
  render() {

    return (
      <View>
        <PopSelectList title='Alcohol Preference' data={this.state.data} visible={this.state.visible} handleSave={() => this.handleSave()} />
      </View>
    );
  }
}

export default PopAlcoholPref;

如果未选中首选项，如何取消选中所有其他复选框？有什么办法可以处理数据？ Index.js是前端，我在此处操作了复选框，而prefalcohol中则是存储数据的地方。

Answer 1

我相信您在这里需要一些重构。

您应将状态处理逻辑移至列表。在列表中，您可以同时操作所有复选框。

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkBoxesList: [{
        id: 1,
        checked: false,
      }, {
        id: 2,
        checked: false,
      }]
    }
  }

  unCheckAll() {
    this.setState({ checkBoxesList: this.state.checkBoxesList.map(({ id }) => ({
      id: id,
      checked: false,
    })) })
  }

  checkBoxSelected(id) {
    const index = this.state.checkBoxesList.findIndex((value) => value.id === id);
    this.setState({ checkBoxesList[index]: { 
      ...this.state.checkBoxesList[index],
      checked: !this.state.checkBoxesList[index].checked 
    })
  }

  renderCheckBoxes() {
    return this.state.checkBoxesList.map(({id, checked}) => (
      <CheckBox id={id} checked={checked} onPress={this.checkBoxSelected} />
    ))
  }

  render() {
    return (
      <View>
        {this.renderCheckBoxes()}
      </View>
    )
  }
}

因此，此组件处理复选框的状态。您需要确保还为OnPress方法在CheckBox组件内实现了回调。现在调用UncheckAll方法将取消选中所有复选框。但是如果索引确实存在，您还必须在设置checkBoxesList之前进行一些额外的检查。

如果数据为“无首选项”，如何取消选中所有其他复选框？

1 个答案: