React 高亮按钮封装

最新推荐文章于 2024-06-16 09:31:03 发布

魑魅魍魉9527

最新推荐文章于 2024-06-16 09:31:03 发布

阅读量276

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/qq_28934205/article/details/109051437

版权

React 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

这篇博客详细介绍了如何创建一个React组件`StateButton`，该组件根据鼠标悬停状态改变图片和文字颜色。代码展示了如何从props接收默认值并根据props更新state，以及在鼠标悬停和离开时触发状态变更的方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述
导入

                  <StateButton imgt={require('../../img/ask/icon_mb_t.png')}
                        imgf={require('../../img/ask/icon_mb_f.png')}
                        text="下载模板" colort='#46C066FF' colorf='#585E6EFF'></StateButton>

代码

import React, { Component } from 'react'

import imgDefultT from '../img/ask/icon_mb_t.png'
import imgDefultF from '../img/ask/icon_mb_f.png'
export class StateButton extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text: '',
            colort: '',
            colorf: '',
            imgf: imgDefultF,
            imgt: imgDefultT,
            isOver: false
        }
    }

    componentWillMount() {
        console.log(this.props);
        if (this.props) {
            this.setState({
                text: this.props.text ? this.props.text : '按钮',
                colort: this.props.colort ? this.props.colort : '#fff',
                colorf: this.props.colorf ? this.props.colorf : '#000',
                imgf: this.props.imgf ? this.props.imgf : imgDefultF,
                imgt: this.props.imgt ? this.props.imgt : imgDefultT,
            })
        }
    }

    render() {
        const { text, colort, colorf, isOver, imgf, imgt } = this.state
        return (
            <div style={{ alignItems: 'center', padding: '5px', display: 'flex', width: '100px', fontSize: "12px" }}
                onMouseOver={() => { this.mouseOverEvent() }}
                onMouseOut={() => { this.mouseOutEvent() }}>
                <img src={isOver ? imgt : imgf} style={{ marginRight: '8px' }} />
                <span style={{ color: isOver ? colort : colorf }}>{text}</span>
            </div>
        )
    }

    // 鼠标焦点高亮显示
    mouseOverEvent() {
        this.setState({
            isOver: true
        })
    }

    // 鼠标焦点高亮取消
    mouseOutEvent() {
        this.setState({
            isOver: false
        })
    }
}

export default StateButton