一个自定义列表组件,需呈现效果:
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);
怎么改代码让它正确实现?
考虑一下在父页面用数组维护他的状态。
之前应该有类似这样的对象数组array,来渲染出头部的四个标签。
设一个selectedID,父组件点击的时候修改selectedID 等于当前选中的ID,然后传给子组件。
在子组件里判断 如果id = selectedID 就显示选中的效果。
array = [{ id:1, text:'平台说明' }, { id:2, text:'售前问题' }, ... ] let selectedID = 1
setTimeout(() => {
getArticleList()
}, 1000),
搞个activeIndex,和当前index匹配