Question

我能够创建动态复选框，但是我现在需要分别选中和取消选中它，如果我选中一项，则选中所有选项，如果取消选中，则取消选中所有选项。

如何从状态分别为每个复选框更改复选框的值？

import React from 'react';
import {View,Text,StyleSheet,TouchableOpacity,Image,Switch,Platform,Dimensions,PixelRatio,} from'react-native';
import ImagePicker from 'react-native-image-picker';
import { Input, Button } from 'react-native-elements';
import { moderateScale } from 'react-native-size-matters';

const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;
const calcHeight = x => PixelRatio.roundToNearestPixel((deviceHeight * x) / 100);
const calcWidth = x => PixelRatio.roundToNearestPixel((deviceWidth * x) / 100);

class ErrorScreen extends React.Component {
  constructor() {
    super();
    this.state = {
      arr: [],
      parkPay: false,
      itemChecked: false,
      index: null,
    };
  }

  functionTwo = () => {
    alert('func 2');
    this.setState(() => ({
      parkPay: true,
    }));
  };

  checkedItem = index => {
    console.log('this is index', index);
    // let itemChecked = this.state.itemChecked
    if (this.state.index != index) {
      this.setState(() => ({
         index: index,
        itemChecked: !this.state.itemChecked,
      }));
    }
  };

  addParkField = () => {
    console.log('jjjjj');
    console.log(' ^^ props in parking form ^^ ', this.props);
    let x = 0;
    this.setState(() => ({
      arr: [...this.state.arr, ''],
    }));

    // this.addFieldSecond()
    // this.props.addParkFieldSecond()
  };

  render() {
    return (
      <View>
      <View
      style={{flex: 1, paddingRight: calcWidth(4),paddingLeft: calcWidth(6), paddingTop: calcHeight(4),paddingBottom: calcHeight(4),
      }}>
      <Input
        placeholder="Enter Amount"
        label="Enter Amount"
        labelStyle={{ fontWeight: '200', color: 'black' }}
        inputContainerStyle={{
          paddingRight: calcWidth(2),
          paddingLeft: calcWidth(2),
          paddingTop: calcHeight(1),
          paddingBottom: calcHeight(1),
        }}
        // onChangeText={this.props.parkingAmount}
      />
      <Text style={[styles.error]}>{this.state.errors.Amount}</Text>

      <View
        style={{ paddingLeft: calcWidth(2), paddingTop: calcHeight(4) }}>
        <View style={{ paddingRight: calcWidth(70) }}>
          <Switch
            value={this.state.parkPay}
            style={
              Platform.OS === 'ios' ? styles.switchIOS : styles.switchAND
            }
            // onValueChange={(value) => {this.props.toggleCustomerParkingPay(value); this.functionTwo()}}
          />
        </View>
        <Text style={{ paddingTop: calcHeight(8) }}>Paid By Customer</Text>
      </View>
    </View>

    <View style={{}}>
      {this.state.arr.map((extra, index) => {
        return (
          <View
            style={{
              flex: 1,
              paddingRight: calcWidth(4),
              paddingLeft: calcWidth(20),
              paddingTop: calcHeight(15),
              paddingBottom: calcHeight(4),
            }}
            key={index}>
            <Input
              placeholder="Enter Amount"
              label="Enter Amount"
              labelStyle={{ fontWeight: '200', color: 'black' }}
              inputContainerStyle={{
                paddingRight: calcWidth(2),
                paddingLeft: calcWidth(2),
                paddingTop: calcHeight(1),
                paddingBottom: calcHeight(1),
              }}
              // onChangeText={this.handleAmount}
              // onChangeText={this.props.parkingAmount}
            />
            <Text style={[styles.error]}>{this.state.errors.Amount}</Text>

            <View style={{ paddingTop: calcHeight(4) }}>
              <View style={{ paddingRight: calcWidth(70) }}>
                <Switch
                  value={this.state.parkPay}
                  style={
                    Platform.OS === 'ios'
                      ? styles.switchIOS
                      : styles.switchAND
                  }
                  // onValueChange={(value) => {this.props.toggleCustomerParkingPay(value);}}
                />
              </View>
              <Text style={{ paddingTop: calcHeight(8) }}>
                Paid By Customer
              </Text>
            </View>
          </View>
        );
      })}

      <View>
        <View
          style={{ paddingLeft: calcWidth(60), paddingTop: calcHeight(2) }}>
          <TouchableOpacity
            style={[styles.cardCirclePassenger]}
            onPress={this.addParkField}>
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                paddingTop: calcHeight(2.2),
              }}>
              {/* <Image
                                    style={{width: 24, height: 24}}
                                    source={require('../../images/Group424.png')}
                                    /> */}
              <Text>Add</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  </View>
  );
  }
}

const styles = StyleSheet.create({
cardCirclePassenger: {
  backgroundColor: '#31588A',
  marginBottom: 10,
  marginLeft: '5%',
  width: 60,
  height: 60,
  borderRadius: 60 / 2,
  borderColor: 'white',
  shadowOpacity: 0.2,
  shadowRadius: 1,
  shadowOffset: {
    width: 3,
    height: 3,
  },
  borderWidth: 1,
},
switchIOS: {
  transform: [
    { scaleX: moderateScale(0.7, 0.2) },
    { scaleY: moderateScale(0.7, 0.2) },
  ],
},
switchAND: {
  transform: [
    { scaleX: moderateScale(1, 0.2) },
    { scaleY: moderateScale(1, 0.2) },
  ],
},
});

export default ErrorScreen;

Answer 1

我花了点功夫，发现下面的方法可以生成动态的复选框和单独的状态值。希望这对某人有帮助。

以下代码在状态下创建动态键/值对。如果您用console.log记录渲染状态，则将看到（check0：true check1：true check2：false ....）。

<Switch
   value={this.state[`check${key}`]}
   onValueChange={value => this.setState({ [`check${key}`]: value })}
/>

如何在React Native中创建动态复选框

1 个答案: