label单选或多选改成图片做法

//页面
  render () {

    const { errorStatus, tabFlag,flag, searchKey } = this.state;
	//首先初始化直接productList取值,默认情况下每个对象的标记flag都为false
    const { productList, isLoading, totalSize_prod, fillingList } = learnStore;
    return (
      <View className="main">
        {/* 搜索框 */}
        <view className="searchTitle">
          <View className="search_top">
            <View className="mainSearch" >
              <View className="search_v" >
                <Image className="searchIconInput" src={ImageKeys.icon_search} />
                {flag == '1' ?
                  <Input value={searchKey}
                    className="input" placeholder='产品名称' type="search" onInput={(e) => this.onInput(e)} onConfirm={this.onSearchConfirm.bind(this)}></Input>
                  :
                  <Input value={searchKey}
                    className="input" placeholder='产品名称' type="search" onInput={(e) => this.onInput(e)} onConfirm={this.onSearchConfirm.bind(this)}></Input>
                }
              </View>
            </View>
          </View>
        </view>

        {/* 列表 */}
        <ScrollView className="scroll" >

            {
                productList && productList.length != 0 ? productList.map((item, index) => {
                  return <NotStartedList
                    item={item}
                    flag={item.flag}
                    preprocessflg={item.preprocessflg}
                    onClick={this.clickDepartList.bind(this, index)}/>
                }) : <EmptyView isLoading={isLoading} />
              }



        </ScrollView>

        <view className="empty" style="margin-top: 25%;"></view>
            


        {/* 底部按钮 */}
        <view className="tabar">
          <view className="blue"  onClick={this.onClickItem.bind(this)}>
            <view className="sure" >确定</view>
          </view>

        </view>

      </View>
    )
  }

   // js控制选中
    clickDepartList (index) {
    //点击的时候重新获取一遍productList 
      const { productList } = learnStore
  
      let lable = false;
      //遍历所有的对象
      for (let i = 0; i < productList.length; i++) {
      //拿到每个对象的标记
        let lableFlag = productList[i].flag;
        //判断这些对象中有没有选中的
        if (lableFlag == '2') {
        //如果选中了,判断点击的和选中的是不是同一个
          if (i == index) {
          //如果是就是把选中的取消
            productList[i].flag = '1'
            lable = true;
            this.setState({
              flag: '1',
            })
          }
        }
      }
      //标记为true,说明已经把勾选的取消选中了,直接返回不执行
      if (lable) {
        return;
      } else {
      //这里主要控制单选还是多选,如果需要多选就注释掉,及不清空其他选中的
        for (let i = 0; i < productList.length; i++) {
          productList[i].flag = '1'
        }
  	
  		//下面就是进来控制选中的
        let checked = productList[index].flag;
        if (checked == '1') {
          productList[index].flag = '2'
          this.setState({
            flag: '2',
            searchDepart: productList[index].labelCode,
          })
        } else {
          productList[index].flag = '1'
          this.setState({
            flag: '1',
          })
        }
      }
    }

//组件
import React, { Component, } from 'react'
import { View, Image, Text, Input, } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import Taro from "@tarojs/taro";
import styles from './index.module.scss'
import { ImageKeys } from '../../../../assets';

const NotStartedList = (props) => {

   
    const { item,preprocessflg='0',onClick,flag="1" } = props;

    return <View className={styles.main} onClick={onClick} >
        <view className={styles.one}>
            {flag=="1"?
                <Image className={styles.notselectPic} src={ImageKeys. icon_noSelectRedio} />
                :
                <Image className={styles.notselectPic} src={ImageKeys. icon_selectRedio} />
            }
            
            <Text className={styles.title} >{item.terminalno}</Text>

        </view>
      

            <View className={styles.line} />
      

    </View>
}

export default React.memo(NotStartedList)