修复 React Native CheckBox答案

【问题标题】：Fixing React Native CheckBox修复 React Native CheckBox
【发布时间】：2020-11-29 14:25:40
【问题描述】：

我有一个 React Native 项目。我的理解是 react native 不允许您固有地设置复选框的样式，因此我正在使用 react-native-check-box 并查看 expo。

运行时我得到“未识别不是一个对象（评估'this.state.isChecked'）”

我正在使用来自 https://www.npmjs.com/package/react-native-check-box#demo 的确切建议代码

出了什么问题？

import React, { useState } from 'react';
import { Text, View, Image } from 'react-native';

import CheckBox from 'react-native-check-box';

import defaultStyles from "../../config/styles";

function AuthorizeInput () {

    return (

        <View style={defaultStyles.authorize}>
        <CheckBox
        style={{flex: 1, padding: 10}}
        onClick={()=>{
        this.setState({
                isChecked:!this.state.isChecked
            })
        }}
        isChecked={this.state.isChecked}
        />
        <Text style={defaultStyles.authText}>I am an authorized representative of this business.</Text>
        </View>
    );
}

export default AuthorizeInput;

【问题讨论】：

标签： javascript react-native checkbox

【解决方案1】：

对于功能组件，您不能使用this.setState（仅适用于类组件）。但是你可以使用useStatehook。例如：

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

import CheckBox from "react-native-check-box";

import defaultStyles from "../../config/styles";

function AuthorizeInput() {
  // default value is false
  const [checked, setChecked] = useState(false);

  return (
    <View style={defaultStyles.authorize}>
      <CheckBox
        style={{ flex: 1, padding: 10 }}
        onClick={() => setChecked(!checked)}
        isChecked={checked}
      />
      <Text style={defaultStyles.authText}>
        I am an authorized representative of this business.
      </Text>
    </View>
  );
}

export default AuthorizeInput;

【讨论】：