【问题标题】:react-native checkbox, how do I check or uncheck by using checkbox when I press the checkbox?react-native复选框,当我按下复选框时如何使用复选框选中或取消选中?
【发布时间】:2016-11-24 10:04:27
【问题描述】:

我想知道如何在 react-native 中选中和取消选中复选框?

我需要使用 getInitialState 和 props 吗?还是只需要使用复选框和 onPress?

【问题讨论】:

  • 您是在创建自己的复选框吗?
  • 只要我可以创建一个框,当我按下该框时我可以选中,当我再次按下时取消选中,我不介意,但我想从一开始就知道,因为我对这种语言还是很陌生
  • 在下面查看我的答案。

标签: checkbox react-native


【解决方案1】:

这是一个快速且非常简单的实现。

import Icon from 'react-native-vector-icons/FontAwesome';

class MyCheckbox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false
        }
    }

    toggle() {
        this.setState({checked: !this.state.checked});
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={this.toggle.bind(this)}>
                <View>
                    {this.state.checked ?
                         <Icon name="angle-left" size={16} color='#000000' />
                         :
                         null
                    }
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

使用 onPress 函数更新组件的状态。将其状态设置为checked = true 或checked = false。

【讨论】:

  • 顺便说一句,这是在 es6 中。
  • 点击特定项目时多个复选框的操作。
【解决方案2】:

您可以使用this component 或编写带有图像的自定义复选框。

【讨论】:

  • 您好,感谢您的评论。介意你能给我一些例子吗?我仍然遇到问题。如果你能举个例子就好了,比如一页你可以看到复选框,如果你点击它,复选标记会消失,再次点击它就会出现。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-16
  • 2013-01-19
  • 2016-03-21
  • 2014-08-07
  • 2020-06-18
相关资源
最近更新 更多