Question

此代码可以使用，但我不知道如何使用此代码单击＆gt;数组中的某个组件，我可以更改颜色。但我想知道当我已经在一个＆gt;组件中更改它时我怎么能不改变颜色，感谢您将来的答案

import React, { Component } from 'react';


export default class Seats extends Component {
    constructor() {
        super()
        this.state = {
            status: false,
        };
    }
    
    changeColor(event) {
        if (this.state.status === false) {
            event.currentTarget.style.backgroundColor = '#D70202';
            this.state.status = true;
        }else {
            this.state.status = false;
             event.currentTarget.style.backgroundColor = '#0CB607';
        }        
    }
    
     render() {
        let array = [];
        for (var i = 0; i < 5; i++) {
            array[i] = i;
        }
        
        const list = array.map((d, index) => <div className="seat"      onClick={this.changeColor.bind(this)} key={index}></div>);
        return (
            <div>
                {list}
            </div>
        );
    }
}

.seat {
    background-color: #0CB607; 
    border: 1px solid black;
    height: 90px;
    width: 90px;
}

Answer 1

这里有两个问题需要单独解决：

您应该使用this.state.status = true|false而不是this.setState({ status: true|false })。这会强制重新渲染。
在您当前的方法中，您只需直接操作DOM，设置style.backgroundColor即可管理您的状态。这将在您的组件下次渲染时被吹走。

为了解决第二个问题，我建议在组件级别存储您正在操作的项目数组state。举个例子：

JS：

export default class Seats extends React.Component {
  constructor() {
    super()

    const seats = [...Array(5)].map(() => ({ status: false }))
    this.state = { seats }
  }

  handleSeatClick(index) {
    const seats = this.state.seats
    const seat = seats[index]
    seat.status = !seat.status

    seats[index] = seat

    this.setState({ seats })
  }

  render() {
    return (
      <div>{list.map((seat, index) => 
        <div className={`seat ${seat.status ? 'highlight' : ''}`}
             onClick={this.handleSeatClick.bind(index)}
        ></div>
      </div>
    )
  }
}

CSS：

.seat {
  background-color: #0CB607;
  border: 1px solid black;
  height: 90px;
  width: 90px;
}

.seat.highlight {
  background-color: #D70202;
}

在此示例中，我们会在组件state中保留席位数组。如果您获得传入的预定义席位列表，将来可以将创建[...Array(5)]...位的行替换为传入props的内容，或者从ajax来电等。

因为席位是以自己的状态持久存在的，所以我们可以在render时检查该状态，以确定是否输出应用颜色的highlight CSS类。 / p>

你可以重构的另一件事（我没有做，为了清楚地解释这一点）是完全摆脱.bind中的render。这样做是一种反模式，因为它会在每次渲染时为列表中的每个项目重新创建新函数。

如何只选择我的组件数组的一个组件

1 个答案: