我怎样才能选择我的组件阵列的只有一个组件

这里的代码工作，但我不知道如何点击我的组件之一>与该代码的数组我可以改变颜色。但我想知道我怎么能不改变颜色的时候我已经在一个改变>组件感谢未来的答案我怎样才能选择我的组件阵列的只有一个组件

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; 
 
}

来源

2017-09-12 NelsonT20

不太理解你的问题。你是否说过，一旦点击了其中一个数组元素，你不希望其他人被点击并改变颜色？或者如果点击另一个，你想让当前选中的一个返回到正常的颜色并改变新点击的颜色？ – Jayce444

我不希望任何其他人被点击，直到我再次点击我做的那个 – NelsonT20

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

而不是使用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呼叫加载等中读取的行。

因为座位是以自己的状态持续存在的，所以我们可以简单地检查该状态，以确定是否输出应用颜色的highlight CSS类（render）。

你可以重构一个其他的东西（我没有这样做，为了保持这个清晰的解释）就是完全摆脱了中的.bind。这样做是一种反模式，因为它会在每次渲染时为列表中的每个项目重新创建新函数。

来源

2017-09-12 01:17:55

感谢您的解释我要试试这个 – NelsonT20

我怎样才能选择我的组件阵列的只有一个组件

回答

相关问题