收藏
回答

自定义组件内,怎么让它点击时切换样式?

一个自定义列表组件,需呈现效果:

1.点击时字体放大,底部出现绿条;

2.未点击时标准字体大小,底部没有绿条;

3.点击某一个内容时,其他的内容均呈现未点击状态。


目前实现的效果是 点开页面后,所有内容都为点击状态:

需要最终效果为:


该组件的代码如下:

import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';

import PropTypes from 'prop-types';

import {

    View,

    Text,

} from 'remax/wechat';

import { clearSearchBase64Url } from '@/actions/common'

import { connect } from 'react-redux';

import useSysInfo from '../../hooks/sysInfo'

import styles from './index.css';


const HelptitleItem = memo(function (props) {

    const { id, name } = props;

    const sysInfo = useSysInfo();

    const [status, setStatus] = useState(1);

    const changeStatus1 = useCallback(() => {

        if (status) {

            setStatus(prev => prev === 0 ? 1 : 0)

            return;

        } else {

            setStatus(prev => prev === 1 ? 0 : 1)

        }

    }, [status])

    function showmodal() {

        let data1 = { props }

        props.showModal(data1)

    }

    return (

        <View className={styles.list}>

            <View className={styles.selectquestion}

                onTap={() => {

                    showmodal()

                    changeStatus1()

                }}

                style={(status) ? { "font-size": "30rpx", "color": "#1D1D1D;" } : { "font-size": "26rpx", "color": "#666666;" }}>

                <Text>{name}</Text>

                {

                    (status)

                        ? <View className={styles.greenline}></View>

                        : null

                }

            </View>

        </View>

    )

})

HelptitleItem.propTypes = {

    id: PropTypes.string.isRequired,

    name: PropTypes.string.isRequired,

}

HelptitleItem.defaultProps = {

}

const mapStateToProps = (state) => {

    const { userInfo } = state.common

    return {

        userInfo

    }

}

const mapDispatchToProps = (dispatch) => {

    return {

        clearSearchBase64Url: () => {

            dispatch(clearSearchBase64Url())

        }

    }

}

export default connect(mapStateToProps, mapDispatchToProps)(HelptitleItem);


怎么改代码让它正确实现?

回答关注问题邀请回答
收藏

2 个回答

  • ⅴ
    2022-11-17

    考虑一下在父页面用数组维护他的状态。

    之前应该有类似这样的对象数组array,来渲染出头部的四个标签。

    设一个selectedID,父组件点击的时候修改selectedID 等于当前选中的ID,然后传给子组件。

    在子组件里判断 如果id = selectedID 就显示选中的效果。


    array = [{
      id:1,
      text:'平台说明'
      },
      {
      id:2,
      text:'售前问题'
      },
      ...
    ]
    
    let selectedID = 1
    
    
    
    2022-11-17
    有用
    回复 9
    • 啵啵
      啵啵
      2022-11-17
      这个还能怎么写吗
      2022-11-17
      回复
    • ⅴ
      2022-11-17回复啵啵
      昨天的问题 先确认一下是不是异步问题吧。你试试给getArticleList加个延时。
      setTimeout(() => {
              getArticleList()
       }, 1000),
      2022-11-17
      回复
    • ⅴ
      2022-11-17
      这里需要有个参数 v.id吧,然后再把selectedID传给子组件
      2022-11-17
      回复
    • 啵啵
      啵啵
      2022-11-17
      setTimeout要加在.then里面,还是把.then删了?
      2022-11-17
      回复
    • ⅴ
      2022-11-17回复啵啵
      你就这个原来的代码 外面加一层
      2022-11-17
      回复
    查看更多(4)
  • 澄c澄悦
    澄c澄悦
    2022-11-17

    搞个activeIndex,和当前index匹配

    2022-11-17
    有用
    回复
登录 后发表内容