Question

import CheckBox from '@react-native-community/checkbox';

export default class All extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isSelected: true,
    };
  }

  checkBoxChanged() {
    alert('changed');
    this.setState({isSelected : !this.state.isSelected})
  }

  render() {
    const { items } = this.state;

    return (
        <Content>
          <View>
            {items.map((item) => (
              <View>
                <Text>{item.name}</Text>
                  <CheckBox
                    value={this.state.isSelected}
                    onValueChange={() => this.checkBoxChanged()}
                  />
              </View>
            ))}
          </View>
        </Content>
    );
  }
}

这不起作用。我的意思是什么也没发生。当我检查时，没有任何变化，也没有到达checkBoxChanged（）。

我陷入了这个问题。如果您能帮助我，我将不胜感激:)

Answer 1

您可以使用onValueChange={() => checkBoxChanged()}

  <CheckBox
      value={this.state.isSelected}
      onValueChange={() => checkBoxChanged()} 
    />

在checkBoxChanged函数中，您可以设置状态以更改isSelected的值

checkBoxChanged(){ 
this.setState({isSelected : !this.state.isSelected})
}

此外，该复选框已被弃用，您必须安装

 @react-native-community/checkbox

选中this链接以了解更多信息。

希望这会有所帮助

Answer 2

import { CheckBox } from 'react-native';

isChecked = false
checkBoxChanged() {
    alert('changed');
}

getCheckedStatus(){
    this.isChecked != this.isChecked;
    return this.isChecked;
}

<CheckBox
    activeOpacity={1}
    textStyle={{ color: colors.colorGray, fontSize: dimen.fontSize.textAppearanceBody1_16 }}
    containerStyle={styles.checkBoxContainer}
    checkedColor={colors.profileTabSelectedColor}
    uncheckedColor={colors.profileTabSelectedColor}
    title={'Gender'}
    checked={this.getCheckedStatus()}
    onPress={() => { this.checkBoxChanged() }}
/>

Answer 3

我想告诉您不要使用react-native中的复选框，但如果您正在使用它，请仍然参见下面的代码，没有onChange Prop，使用onValueChange代替onChange，并保持状态并将值prop传递给复选框组件。

https://reactnative.dev/docs/checkbox#__docusaurus

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

export default App = () => {
  const [isSelected, setSelection] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.checkboxContainer}>
        <CheckBox
          value={isSelected}
          onValueChange={setSelection}
          style={styles.checkbox}
        />
        <Text style={styles.label}>Do you like React Native?</Text>
      </View>
      <Text>Is CheckBox selected: {isSelected ? "?" : "?"}</Text>
    </View>
  );
};

Answer 4

代码应为

import { CheckBox } from 'react-native';

checkBoxChanged() {
  alert('changed');
}

<CheckBox onValueChange={()=>this.checkBoxChanged()} />

您正在直接调用该函数，而不是在单击时调用它。此复选框仅在Android中有效，因此最好使用react-native元素中的一个 https://react-native-elements.github.io/react-native-elements/docs/checkbox.html

Answer 5

复选框已从react-native-element中弃用，但可以在react本机组件中使用。

使用它们。安装：npm install @ react-native-community / checkbox --save

用法：

import CheckBox from '@react-native-community/checkbox';

在内部使用此元素

<CheckBox  value={this.state.check}
                            onChange={()=>this.checkBoxText()} />

在课堂上

constructor(props) {
        super(props);
        this.state = {
        check: false
        };

在构造函数区域之外声明一个函数。创建：

checkBoxText() {
        this.setState({
            check:!this.state.check
        })
       alert("Value Changed to " + this.state.check)
    }

它将在您的应用程序上创建您可点击的复选框。

为什么复选框在React Native中不起作用？

5 个答案: