代码之家 › 专栏 › 技术社区 › soalrib

使用react.js更改特定单击元素的css

target reactive-programming reactjs

1

soalrib · 技术社区 · 8 年前

这是我的第一个问题,很抱歉,如果这看起来有点混乱。我在实习期间正在react.js中开发一个应用程序,目前正与e.target一起努力应用css更改。这是我当前的代码:

import React from 'react';

export default class Line extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            display: 'block',
            border: 0
        };
        this.changeDisplay = this.changeDisplay.bind(this);
        this.showCircle = this.showCircle.bind(this);
    }

    changeDisplay() {
        const newDisplay = this.state.display == 'block' ? 'none' : 'block';
        this.setState({ display: newDisplay });
    }

    showCircle(e) {
        console.log(e.target);
        const newCircle = this.state.border == 0 ? '2px solid #2B3438' : 0;
        this.setState({
            border: newCircle
        });
    }


    render() {

        return (
            <div style={{ display: this.state.display }}>
                <button id="Cross" onClick={this.changeDisplay}>&#10005;</button>
                <div id="Line">
                    <div id="InsideLine">
                        <img src="../../../ic/icon-linha.svg" />
                        <p>Line</p>
                    </div>

                    <div className="circle" id="one" onClick={(e) => this.showCircle(e)} style={{ border: this.state.border }}></div>
                    <div className="circle" id="two" onClick={(e) => this.showCircle(e)} style={{ border: this.state.border }}></div>
                    <div className="circle" id="three"></div>
                    <div className="circle" id="four"></div>
                    <div className="circle" id="five"></div>

                </div>
            </div>
        )
    }
}

在函数“ShowCircle(e)”中,我可以从控制台返回。如下图所示,记录刚才单击的元素: console.log has return clicked div

我的疑问是:我真的不知道把e.target放在何处,以便在“showcircle”函数中进行更改。我把“this.”改成了“e/e.target”,但没用。

顺便说一句,showcirles函数起作用,它改变了边框,但是在所有的div中,只要点击就调用了showcirles函数。

目标是在单击的颜色周围显示边框,以便用户知道他刚刚单击的位置。

2 回复 | 直到 8 年前

1

fsl 8 年前

每个圆都有一个状态是否可行?类似的事情可能会奏效:

state = {
    circles: {
        one: 0,
        two: 0,
        three: 0,
        // (...)
    }
}

showCircle = (e) => {
    let id = e.target.id
    let circles = this.state.circles

    if (circles[id] !== 0) {
        circles[id] = 0
    } else {
        Object.keys(circles).forEach(c => circles[c] = 0) // Resets to initial styling
        circles[id] = '2px solid #2B3438'
    }

    this.setState({
        circles: circles,
    });
}

然后稍微更改渲染的div(顺便说一下,您不需要将事件作为参数传递)。

<div 
    className="circle" 
    id="one" 
    onClick={this.showCircle} 
    style={{ border: this.state.circles.one}}>
</div>

2

0

Aseem Upadhyay 8 年前

这可能是解决这个问题的另一种方法,除了菲利佩建议的

你对所有这些人都会有同样的行为 divs 因为你没有把这些实体当作不同的实体。

为了使它们不同,您需要为它们分配不同的变量,通过这些变量可以识别 div 你指的是。

例如。

showCircle(divClicked) { if(divClicked=='circleone') {this.setState({cricleone: true}) }}

然后,在渲染中可以有两种样式,根据哪个状态变量为真来激活其中一种。