react 鼠标事件的一些疑问

Question

代码:

                    <Row>
                        {
                            services.map((item) => (
                                <Col span="8" key={item.key}>
                                    <Card onMouseOver={this.handleMouseOver}
                                        onMouseOut={this.handleMouseOut} title={item.name} extra={
                                            <div style={{ display: this.state.display }}>
                                                <Button>申请</Button>
                                                <Button>文档</Button>
                                            </div>
                                        }>{item.desc}</Card>
                                </Col>
                            ))
                        }
                    </Row>

循环一个list render出每一个card.

给每一个card加一个事件:

    handleMouseOver(e) {
        console.log('mouse over')
        this.setState({
            display: 'block'
        })
    }
    handleMouseOut(e) {
        console.log('mouse out');
        this.setState({
            display: 'none'
        })
    }

问题：当触发某一个card的事件。其它所有的card都会被触发。怎么才能触发某一个card呢？

Answer 1

state = {
    display: 0
}

// 传个 key
onMouseOver={this.handleMouseOver(item.key)}

// 2
handleMouseOver = (key) => (e) => {
    this.setState({ display: key })
}

// 3
style={{ display: item.key === this.state.display ? 'block' : 'none' }}

[update] 或者可以这样：

extra={
    this.state.display !== item.key ? [] :
    <div>
        <Button>申请</Button>
        <Button>文档</Button>
    </div>
}