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

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 function 中，您可以设置 state 以更改isSelected的值

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

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

 @react-native-community/checkbox

检查此链接以了解更多信息。

希望这可以帮助

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，并维护一个 state 并将 value 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()} />

您直接调用 function 而不是单击时调用它。 This checkbox works only in Android so better use the one from react-native elements https://react-native-elements.github.io/react-native-elements/docs/checkbox.html

Answer 5

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

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

用法：

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

在你里面使用这个元素

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

在你的 class 里面

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

在您的构造函数区域外声明一个 function。 创造：

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

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