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）”中，我可以从console.log返回刚刚单击的元素，如下图所示： console.log has return clicked div

我的疑问是：我真的不知道将e.target放置在“ showCircle”函数内的更改位置。我取代了“这个”。与“ e./e.target”一起使用，则不起作用。

顺便说一句，showCircles函数可以正常工作，它会更改边框，但在单击时会调用“ showCircles”函数的所有div中。

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

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

除了费利佩建议的那样，这可能是解决问题的另一种方法

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

为了使它们与众不同，您需要为它们分配不同的变量，通过它们可以识别所指的div。

例如。

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

然后在渲染中可以有两种样式，根据状态变量为true激活两种样式。

使用React.js更改特定单击元素的CSS

2 个答案: