React Native Elements Checkbox SetState 不是函数

Question

实现了一个使用复选框的屏幕。按照 React Native Checkbox

中的示例

单击复选框时，收到以下错误：

TypeError: _this.setState is not a function. (In '_this.setState({
      checked: !_this.state.checked
    })', '_this.setState' is undefined)

下面是我的代码：

import * as React from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import {Button, Card, CheckBox} from 'react-native-elements';

function MyScreen({navigation}) {
  return (
    <View style={styles.view}>
      <View style={styles.panel}>
        <Card containerStyle={styles.card} title="My Checkboxes">
          <CheckBox
            title="My Checkbox"
            checked={this.state.checked}
            onPress={() => this.setState({checked: !this.state.checked})}
          />
        </Card>
        <Button
          style={styles.button}
          title="Done"
          onPress={() => navigation.navigate('Home')}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  view: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  panel: {
    width: Dimensions.get('window').width,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: 0,
  },
  button: {
    margin: 5,
    width: 150,
    height: 50,
  },
  card: {
    width: Dimensions.get('window').width,
    marginBottom: 20,
  },
});

export default MyScreen;

我试过在这里和几乎所有地方搜索，但似乎找不到解决方案。

如有任何帮助，我们将不胜感激。

Answer 1

您正在使用功能组件。

将其更改为 class 组件 或 在此功能性 组件内使用挂钩。

按如下方式更改您的代码

class分量

import React, { Component } from 'react'
import {Dimensions, StyleSheet, View} from 'react-native';
import {Button, Card, CheckBox} from 'react-native-elements';

export default class App extends Component {
state={ checked: false };
  render() {
    return (
      <View style={styles.view}>
      <View style={styles.panel}>
        <Card containerStyle={styles.card} title="My Checkboxes">
          <CheckBox
            title="My Checkbox"
            checked={this.state.checked}
            onPress={() => this.setState({checked: !this.state.checked})}
          />
        </Card>
        <Button
          style={styles.button}
          title="Done"
          onPress={() => navigation.navigate('Home')}
        />
      </View>
    </View>
    )
  }
}

或功能组件

import React, {useState} from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import {Button, Card, CheckBox} from 'react-native-elements';

function MyScreen({navigation}) {
  const [checked, toggleChecked] = useState(false);
  return (
    <View style={styles.view}>
      <View style={styles.panel}>
        <Card containerStyle={styles.card} title="My Checkboxes">
          <CheckBox
            title="My Checkbox"
            checked={checked}
            onPress={() => toggleChecked(!checked)}
          />
        </Card>
        <Button
          style={styles.button}
          title="Done"
          onPress={() => navigation.navigate('Home')}
        />
      </View>
    </View>
  );
}

Answer 2

如果您在另一个组件中将 functional component 用作子项，则可以改用 props。

 function MyScreen({navigation, onChecked, checked}) {
      return (
        <View style={styles.view}>
          <View style={styles.panel}>
            <Card containerStyle={styles.card} title="My Checkboxes">
              <CheckBox
                title="My Checkbox"
                checked={checked}
                onPress={onChecked}
              />
            </Card>
            <Button
              style={styles.button}
              title="Done"
              onPress={() => navigation.navigate('Home')}
            />
          </View>
        </View>
      );
    }

  MyScreen.propTypes = {
     checked: PropTypes.bool.isRequired,
     onChecked: PropTypes.func.isRequired
  };

export default MyScreen;

在 parent component 上 onChecked 可以看起来像：

onChecked =()=>{
  ...
  this.setState({checked: !this.state.checked})
}

同样在父组件中，可以使用MyScreen作为：

<MyScreen
  onCheck={this.onChecked} 
  checked={this.state.checked}
/>

React Native Elements Checkbox SetState 不是函数

React Native Elements Checkbox SetState is not a function

checkbox

react-native

react-native-elements