标签：index return 自定义 React item 单选 suggestlist sel

项目中我们经常会遇到单选的功能，有很多第三方库也有类似功能，譬如Ant Design Mobile RN库中的Radio，

但是这些样式是固定的，当我们需要自定义单选图标，完全自定义时，就需要我们自己实现了。

下面简述下自定义单选的功能，

本质是为每条数据绑定一个选中标记sel，然后通过该标记来实现单选

效果如图：

 

话不多说，直接上代码

state = {
        suggestlist: [{ sel: true, title: '单选1' }, { sel: false, title: '单选2' }, { sel: false, title: '单选3' }, { sel: false, title: '单选4' }],
    };

    render() {
        return (
            <View style={style.item_bg}>

                <Text style={style.item_title}>单选列表</Text>
                {/* 单选列表 */}
                {this.radiolist()}

            </View>
        );
    }

    private radiolist() {
        return this.state.suggestlist.map((item, index) => {
            return (
                <TouchableOpacity onPress={() => {
                    this.click(index)
                }} key={index}>
                    <ComponentSuggestItemView
                        item={item}
                    />
                </TouchableOpacity>
            )
        })
    }

    public click(index: number) {
        this.state.suggestlist.forEach((item, position) => {
            if (index == position) {
                item.sel = true;
            } else {
                item.sel = false;
            }
        });

        this.setState({
            suggestlist: this.state.suggestlist
        });

    }

单选组件 ComponentSuggestItemView

render() {
        return (
            <View style={style.item_top_btn}>
                {this.showImg()}
                <Text style={style.item_top_right_title}>{this.props.item.title}</Text>   
            </View>
        );
    }

    private showImg() {
        if (this.props.item.sel) {
            return (
                <Image source={require('../../../image/icon_check.png')} />
            );
        }
        return (
            <Image source={require('../../../image/icon_uncheck.png')} />
        );
    }

 

标签：index,return,自定义,React,item,单选,suggestlist,sel
来源： https://www.cnblogs.com/lijianyi/p/14863713.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。