CheckBox 值触发完成功能。反应原生答案

【问题标题】：CheckBox value trigger complete function. React NativeCheckBox 值触发完成功能。反应原生
【发布时间】：2021-06-13 02:25:18
【问题描述】：

我正在尝试使用 React Native 制作一个待办事项列表。当复选框被选中或值设置为 true 时，如何运行props.completeFunction()。

另外，我如何检查props.item.completed 是否为真，以便复选框值设置为真。

我不擅长 React Native 的语法，所以我问你这个。谢谢

import React, {useState} from 'react';
import {Text, TouchableOpacity, CheckBox} from 'react-native';
export default function TodoItem(props) {
    // Update style according to props
    let style = props.item.completed ? {
        textDecorationLine: 'line-through'
    } : {
        textDecorationLine: 'none'
    }

    const [isSelected, setSelection] = useState(false);
    return (
        <TouchableOpacity
            onLongPress={() => props.deleteFunction()}
            style={{paddingVertical: 8, flexDirection: 'row', justifyContent: 'space-between'}}>
            <Text style={[{fontSize: 18}, style]}>{props.item.text}</Text>

            <CheckBox
            value={isSelected}
            onValueChange={setSelection}
            />
            

        </TouchableOpacity>
    );
}

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

我们可以在 onValueChange 中调用一个函数。因此您可以尝试将其更改为：

onValueChange={() => {setSelection(!isSelected); isSelected && props.completeFunction()}

【讨论】：

【解决方案2】：

已解决：通过添加 onChange = {() => props.completeFunction()} 它解决了问题。删除线文本装饰线现在带有 CheckBox 的值。

【讨论】：