Question

我正在尝试模仿应用于div映射的选中的componenet的行为。我正在映射称为价格的元素数组的displayName和imageUrl。在div上单击时，在handleProductSelect函数中，我只希望突出显示所单击的div，但是它们都将被突出显示，这很有意义，因为我正在集体更改样式。

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            borderColor: 'white',
}
}


    handleProductSelect() {
        const { borderColor } = this.state;
        let newBorderColour = borderColor === 'white' ? 'blue' : 'white';
        this.setState({
            borderColor: newBorderColour,
        })
    }

(price.map(p =>
                    <div key={p.productId}>
                        <div
                            style={{ 
                                borderRadius: '10%',
                                borderStyle: 'solid',
                                padding: '10px',
                                marginBottom: 10,
                                borderColor: this.state.borderColor,
                             }}
                            onClick={this.handleProductSelect(p.productId)}>
                            <div>{p.displayName}</div><br />
                            <div>{p.imageUrl !== '' ? p.imageUrl : <img style={{ width: '100px', height: '50px' }} src={"https://source.unsplash.com/200/150"} />}</div><br />
                        </div>
                    </div>
                ))
}

有人对如何仅使单击的元素突出显示有任何想法吗？

Answer 1

使用您要传递给handleProductSelect函数的ID并将其保存到状态。您可以在render方法中使用它，以确定哪个元素是被单击的元素，并对其应用适当的样式

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            borderColor: 'white',
            active_id: null
        };
}


    handleProductSelect(productId) {
        const { borderColor } = this.state;
        let newBorderColour = borderColor === 'white' ? 'blue' : 'white';
        this.setState({
            borderColor: newBorderColour,
            active_id: productId
        })
    }

render {
return(
    (price.map(p =>
        <div key={p.productId}>
            <div
                style={{ 
                    borderRadius: '10%',
                    borderStyle: 'solid',
                    padding: '10px',
                    marginBottom: 10,
                    borderColor: ( p.productId === this.state.active_id ? this.state.borderColor : 'white'),
                 }}
                onClick={this.handleProductSelect.bind(this, p.productId)}>
                <div>{p.displayName}</div><br />
                <div>{p.imageUrl !== '' ? p.imageUrl : <img style={{ width: '100px', height: '50px' }} src={"https://source.unsplash.com/200/150"} />}</div><br />
            </div>
        </div>
    ))
    }
)}

Answer 2

这里，我修复了三元运算符样式css的语法，并修复了带有onClick事件的fatArrow函数

size_type

将样式仅应用于元素映射中的一个元素

2 个答案: