使用 React.js 更改特定点击元素的 css

Question

这是我的第一个问题，很抱歉，如果这看起来有点混乱。我在实习期间正在 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)' 中，我可以 return 来自 console.log 我刚刚单击的元素，如下图所示： console.log has return clicked div

我的疑问是：我真的不知道将 e.target 放在哪里以在 'showCircle' 函数中进行更改。我用 'e./e.target' 替换了 'this.' 但它不起作用。

顺便说一句，showCircles 函数有效，它改变了边框，但在所有 div 中，点击时调用 'showCircles' 函数。

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

Answer 1

每个圈子都有一个状态是否可行？类似的东西可能会起作用：

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>

Answer 2

除了 Felipe 建议的方法之外，这可能是解决问题的另一种方法

您将对所有这些 divs 有相同的行为，因为您没有将这些实体视为不同的实体。

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

例如。

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

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

使用 React.js 更改特定点击元素的 css

Change css of specific clicked element with React.js

target

reactive-programming

reactjs